css position 位置

最新推荐文章于 2025-02-06 17:45:59 发布

原创最新推荐文章于 2025-02-06 17:45:59 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#position

本文深入解析了CSS中的四种定位方式：绝对定位、相对定位、静态定位和固定定位。详细阐述了每种定位方式的特点，包括它们如何影响元素的位置、大小及与其他元素的关系。

// absolute 绝对定位:  定位是相对于离它最近的且不是static定位的元素而言，偌该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的元素会来占据
// relative 相对定位： 定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小，通过 top， bottom， left， right，的设置相对于其正常（原先本身）位置进行定位，可通过z-index进行层次分级
// staitc 静态定位：默认值，没有定位，元素出现在正常的流中（忽略top，bottom，left，right，或者 z-index 生明）
// fixed 固定定位：生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过 left， top，right，以及 bottom，属性进行规定。可通过z-index进行层次分级。