gwooden_코린이

css 포지션 position 본문

프론트엔드/html

css 포지션 position

gwooden22 2022. 12. 16. 18:01
728x90

- css 포지션 position

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style3.css">
</head>
<body>
  <img src="http://via.placeholder.com/150">
  <img class="rel" src="http://via.placeholder.com/150/000">
</body>
</html>
.rel {
  position: static;
}

 

이미지 위치를 옮길 때

  • left
  • right
  • top
  • bottom
.rel {
  position: relative;
  left: 50px;
}

<body>
  <img src="http://via.placeholder.com/150">
  <div class="rel">
    <img src="http://via.placeholder.com/150/000">
  </div>
</body>
.rel {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  position: relative;
  left: 50px;
}

absolute를 사용할때는 부모 포지션이 static이면 안

.rel {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  position: relative;
  left: 50px;
  top : 50px
}

.rel img {
  position: absolute;
  right: 10px;
  bottom: 5px;
}

.rel {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  position: relative;
}

.rel img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

이미지 2개 중 하나는 고정 시키고 스크롤을 내려도 따라오게끔 설정

이런 방법은 사이트 내 광고 또는 상단으로 바로가기 같은 버튼을 고정하는데 이

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style3.css">
</head>
<body>
  <img src="http://via.placeholder.com/150">
  <img class="f" src="http://via.placeholder.com/150/000">
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
  <p>aaaa</p>
</body>
</html>
.f {
  position: fixed;
  right: 5px;
  bottom: 10px;
}

.f {
  position: fixed;
  right: 5px;
  bottom: 10px;
}

h1 {
  position: sticky;
  top: 0;
  background-color: pink;
}

겹치는 요소들 순서를 변경하고 싶을때 z-index 기능을 사용하면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style3.css">
</head>
<body>
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
</body>
</html>
div {
  width: 200px;
  height: 200px;
  position: absolute;
}

.a {
  top: 20px;
  left: 20px;
  background-color: blueviolet;
}

.b {
  top: 40px;
  left: 40px;
  background-color: skyblue;
}

.c {
  top: 60px;
  left: 60px;
  background-color: brown;
}

 

728x90
저작자표시 비영리 변경금지

'프론트엔드 > html' 카테고리의 다른 글

html + CSS transform 기능 살펴보기  (0) 2022.12.19
html + CSS 네비바 활용한 간단한 페이지 및 sns 프로필 만들어보기  (0) 2022.12.19
html + CSS 네이버 로그인 창 만들어보기  (0) 2022.12.16
css 박스 사이즈  (0) 2022.12.16
css 포지션 float  (0) 2022.12.15
'프론트엔드/html' Related Articles more
Comments