개발나라 스용공주

[HTML/CSS] position:absolute 적용 시 display 속성 변화 본문

WEB/HTML & CSS

[HTML/CSS] position:absolute 적용 시 display 속성 변화

스용공주 2024. 11. 9. 17:13
728x90
728x90

이번 글은 요소에 position:absolute를 적용하였을 경우 display 속성이 어떻게 변화되는지에 대한 설명글이다.

 

 

 

[ 설명 예제 ]

아래 실행결과와 코드를 보면 사각형을 그리는데 사용된 <div>태그의 경우 display의 block속성을 가졌다.

따라서 아래 사진과 같이 자식요소에 해당하는 사각형들이 세로로 배치된 block속성의 형태인것을 확인할 수 있다.

실행결과

 

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
</head>
  
<body>

  <div class="parents">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
  
  <script src="script\jquery-1.12.4.js"></script>
  <script src="script\custom.js"></script>

</body>
</html>

 

[ css ]

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.parents {
    background-color: green;
    width: 500px;
    height: 300px;
}
.child1 {
    background-color: gold;
    width: 200px;
    height: 100px;
}
.child2 {
    background-color: orange;
    width: 200px;
    height: 100px;
}

 

 

 

 

하지만 여기에 position속성을 아래 코드와 같이 적용하게 되면 기존의 block속성의 특징이 사라지게 되는 것을 확인할 수 있다.

그 이유는 바로 position 속성 중 absolute 속성값 적용 시 해당 속성을 적용받은 개체는 display속성이 inline-block으로 바뀌기 때문이다.

[ css ]

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.parents {
    background-color: green;
    width: 500px;
    height: 300px;
    position: relative;
}
.child1 {
    background-color: gold;
    width: 200px;
    height: 100px;
    position: absolute;
    display: block;
}
.child2 {
    background-color: orange;
    width: 200px;
    height: 100px;
    position: absolute;
    display: block;
}

 

 

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[HTML/CSS] 인접선택자 +와 ~ 사용 설명  (0) 2024.11.14
[HTML/CSS] li 가로 배치하기  (0) 2024.11.12
[HTML/CSS] z-index 속성 - 요소 배치 순서 변경하기  (0) 2024.11.07
[HTML/CSS] 웹페이지에 쉽게 아이콘 넣기 - 부트스트랩 아이콘  (0) 2024.11.01
[HTML/CSS] 그림자 효과 활용하기  (0) 2024.11.01
'WEB/HTML & CSS' Related Articles more
Comments