欢迎来到汇淘网

汇淘网

当前位置:

CSS定位

时间:2019-12-10 02:17:51 出处:边防阅读(143)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/hey_uncle/article/details/971007391.position:absolute/relative的区别与应用应用:子绝父相absolute( 绝对的)绝对定位,是在层级关系上,离自己最近的父级,设有positon:relative(相对的)的左上角进行定位。如果祖代元素中,没有relative相对定位的元素 ,就默认相对于body定位。补充解释 :relative相对定位 ,是相对于元素自己本身原来的位置,进行定位,用left/right/top/bottom定位。本元素并没有脱离文档流,还占有原来的空间 。2.position:absolute/relative是否在文档流中absolute绝对定位,是脱离文档流的, 与浮动float:left/right浮动定位一样的效果 。注意:浮动定位是压在绝对定位的元素之上的。可以设置z-index,值小的更靠近用户的实现 ,值大的压在下面,默认值为auto 。relative相对定位 ,没有脱离文档流。使之脱离文档流的方法:设置z-index 。使本元素相对于文档流中的元素层叠,或者脱离文档流。3.应用代码示例<div id="frame"><div id="pohots" class="play"><img src="http://www.jq22.com/img/cs/500x300-1.png" alt=""><img src="http://www.jq22.com/img/cs/500x300-2.png" alt=""><img src="http://www.jq22.com/img/cs/500x300-3.png" alt=""><img src="http://www.jq22.com/img/cs/500x300-4.png" alt=""><ul id="dis"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></div>在外面套个盒子.box {position: relative;left: 50%;margin-left: -150px;}

分享到:

温馨提示:以上内容和图片整理于网络,仅供参考,希望对您有帮助!如有侵权行为请联系删除!

友情链接: