css position属性

今天复习了一下css的position属性,作为css中比较重要的属性,如果使用得当,那么页面布局将如虎添翼。它具有几个属性值,其区别如下:

static fixed relative absolute inherit
定位 无定位(默认值) 绝对定位(相对于浏览器边框) 相对定位(相对于其正常位置进行定位) 绝对定位(相对于 static 定位以外的第一个父元素进行定位) 继承父元素的position属性值
是否脱离文档流 继承父元素的position属性值

特别地:
position: absolute 的定位,相对于 static 定位以外的第一个父元素进行定位,其理解为:

如果想要一个子元素相对于其父元素进行定位,则父元素应设置position为除了默认值static以外的值(如果为inherit则继承的值应为除了static以外的值),例如:子元素A希望相对父元素B进行定位,则将父元素B设置为position: relative;

如果父元素没有设置position属性,或者说设置为static(虽然一般没人这么无聊),那么该子元素则相对于层层向外遇到的第一个position不为static的父元素定位。

position: absolute对于用margin或者padding不好定位的情况有奇效。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容