HTML5의 위치에 대한 심층적인 이해

CSS의 위치는 매우 중요합니다. 위치에는 총 4개의 속성 값이 있으며 그 값은

　　　　　　　정적, 상대, 절대, 고정입니다.

요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정되며 표시 수준은 z-index를 통해 제어됩니다.

정적: 정적 위치 지정. position 속성을 설정하지 않으면 기본값은 static입니다. 위쪽, 왼쪽, 아래쪽 및 오른쪽과 같은 속성은 정적일 때 유효하지 않습니다. 이러한 속성을 사용하려면 위치를 다른 세 가지 값 중 하나로 설정해야 합니다.

relative: relative 요소는 일반적인 문서 흐름을 따르므로 주변 요소는 그 존재를 무시하지 않습니다. relative 요소도 top, Bottom, left , right 및 기타 속성. 상단, 하단, 왼쪽, 오른쪽 및 기타 속성을 사용하여 상대 요소를 상대적으로 배치하면 그 효과는 여백 속성과 다르지만 차이점은 <code>relative 요소를 둘러싼 요소가 relative 요소relative 元素遵循正常的文档流，所以周围元素不会忽略它的存在，relative 元素同样支持 top,bottom,left,right等属性。当我们使用 top,bottom,left,right等属性对 relative 元素进行相对定位时的效果有点类似于 margin 属性达到的效果，但是区别在于， relative 元素周围的元素将会忽略 relative 元素的移动

# p 
{
background:#ccc; width:200px; height:200px;
position:relative; left:200px; top:200px
}

absolute：absolute 元素将会脱离正常的文档流，所以 其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时，我们可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性，top 或 bottom,left 或 right。

# p 
{
background:#ccc; width:200px; height:200px;
position:absolute; left:200px; top:200px
}

fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

首先，fixed 元素定位与它的父元素无任何关系，它永远是相对最外层的 window 进行定位的。
第二，fixed

# p 
{
background:#ccc; width:200px; height:200px;
position:fixed; left:200px; top:200px
}

absolute의 이동을 무시한다는 것입니다. absolute 요소는 일반 문서 흐름에서 제외되므로 주변 요소에서 해당 요소의 존재를 무시합니다. 마치 absolute 요소의 display 속성이 none으로 설정된 것과 같습니다. 이때 절대 요소의 절대 위치를 지정하기 위해 상단, 하단, 왼쪽, 오른쪽 등의 속성을 사용할 수 있습니다. 일반적으로 상단 또는 하단, 왼쪽 또는 오른쪽의 두 가지 속성이 정의됩니다. rrreee

🎜🎜🎜🎜🎜🎜fixed: 위치가 고정되었습니다. 요소는 브라우저의 고정 위치로 설정되며 다른 요소와 함께 스크롤되지 않습니다. 비유적으로 말하면, 스크롤바를 위로 올리거나 아래로 당겨도 화면에서 고정된 요소의 위치는 변하지 않습니다. IE6은 이 속성을 지원하지 않는다는 점에 유의하세요. 🎜🎜🎜🎜우선, fixed 요소의 위치 지정은 상위 요소와 아무 관련이 없습니다. 항상 가장 바깥쪽 창을 기준으로 위치가 지정됩니다. 🎜🎜🎜둘째, fixed 요소는 이름과 마찬가지로 화면의 특정 위치에 고정되어 화면 스크롤로 인해 사라지지 않습니다. 🎜🎜rrreee🎜🎜🎜🎜🎜🎜🎜위치 속성은 CSS 레이아웃에서 매우 중요합니다. 위치 속성에 대한 진정한 이해는 앞으로 p+CSS를 배우는 데 큰 도움이 될 것입니다🎜🎜

위 내용은 HTML5의 위치에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!