这篇文章将为大家详细讲解有关CSS中定位position属性怎么使用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。css中定位position属性的用法：1、一般的标签元素不加任何定位属性都属于静态定位；
这篇文章将为大家详细讲解有关CSS中定位position属性怎么使用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
css中定位position属性的用法：1、一般的标签元素不加任何定位属性都属于静态定位；2、绝对定位的元素从文档流中拖出；3、相对定位元素不可层叠；4、固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
css中定位position属性的用法：
1、静态定位（static）
一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。
2、绝对定位（absolute）
绝对定位的元素从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。
绝对定位的定位方法：
如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，
如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，
如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，
如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非相对于浏览器窗口，相对于窗口定位的是fixed）。
<head><style type="text/css">.box {background: red;width: 100px;height: 100px;float: left;margin: 5px;}.two {position: absolute;top: 50px;left: 50px;}</style></head><body><div class="box" >One</div><div class="box two" >Two</div><div class="box" >Three</div><div class="box">Four</div></body>将class="two"的div定位到距离的顶部和左侧分别50px的位置。会改变其他元素的布局，不会在此元素本来位置留下空白。
3、相对定位（relative）
相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
<head><style type="text/css">.box {background: red;width: 100px;height: 100px;float: left;margin: 5px;}.two {position: relative;top: 50px;left: 50px;}</style></head><body><div class="box" >One</div><div class="box two" >Two</div><div class="box" >Three</div><div class="box">Four</div></body>将class="two"的div定位到距离它本来位置的顶部和左侧分别50px的位置。不会改变其他元素的布局，会在此元素本来位置留下空白。
4、固定定位（fixed）
固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。
关于“css中定位position属性怎么使用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: css中定位position属性怎么使用
本文链接: https://www.lsjlt.com/news/268788.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0