<!----><!----><!----><!---->
<!---->
有三个值,
static
(静态)、
relative
(相对)、
absolute
(绝对);由于
static
是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定义。
对于后两者,一般应用:在一个相对定位的元素里面放置一个绝对定位的元素,如图:
子元素
B
可以通过
top
、
right
、
bottom
、
left
来精确定位,定位的参考目标就是其具有相对定位属性的父级元素
A
;并且设置这些偏移后,产生的空隙会被后面的元素填充(如果后面的元素足够尺寸的话)。由于
B
元素具有
absolute
定位属性,相当于从文档流中抽取出来,浮动在原平面排版上,形成“层”,如果有多个“层”,层与层之间就必然会有谁覆盖谁,谁在上谁在下的竞争关系,因此,为解决这个竞争,就产生了
z-index
(空间坐标系的
Z
轴)
属性,谁的值大,谁就在上面。另外,如果父级元素
A
没有设置
relative
,那么
B
元素就会以
body
标签当作参考点。
对于具有
position:relative
属性的元素
A
,其
top
、
right
、
bottom
、
left
四个方向的位置偏移就会以该元素的原来位置作为参考点,而不是像上面说的,以具有
relative
定位属性的父级元素或
body
作为参考点。在设置了偏移后产生了空隙,其周围的元素并不会填充这些空隙,即使它们足够尺寸
(演示
)
。值得注意的是,此时元素
A
的
margin
,
margin
将作用于该元素的原来位置,由于原位置产生偏移,该元素的最终位置将是
margin
与
top
、
right
、
bottom
、
left
共同作用后的位置,并且其周围元素的位置也将产生影响。
回过头来再看看
relative
里面的
absolute
,比如上面的
A
、
B
两个元素,如果两个元素都设置了
top
、
right
、
bottom
、
left
,对于元素
B
来说,其位置偏移的参考点是元素
A
偏移后的位置,不是元素
A
的原位置,同样,如果元素
B
有
margin
,其参考点也是元素
A
偏移后的位置,这点很重要,这才是
absolute
的概念
分享到:
相关推荐
今天在写一个购物车里面选择发货地址的部分时,多个收货地址用到了UL标签,由于每个地址的后面有个“修改地址”的功能,而且位于li标签的右边,于是就用到了,position:absolute; right:10px;这样把“修改地址”...
position:relative/absolute无法冲破的等级
CSS中的position:relative是控制元素相对定位的,relative 不脱离文档流而absolute 脱离文档流,relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变
NULL 博文链接:https://rainbow702.iteye.com/blog/1703317
position:absolute属性在其他浏览器中都是正常的,但惟独在ie6下有问题,下面是经过测试可行的解决方法
详细讲解heml中position、absolute、relative层叠加的技巧
今天在看CSS的时候遇到了position: absolute、relative的问题,一直比较迷糊,今天终于搞清楚了。
回想在网上看过的一篇文档,大意就是,如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性。 我给了。大按钮上的链接都恢复了。但是”css”"js”"seo”3个小按钮上没有...
对position的属性relative和absolute的总结
页脚显示在页面底端的布局方法 ... padding:0px; height:100%;} body{ margin:0px; padding:0px;height:100%;} .body{ position:relative; min-height:100%;... position:absolute; bottom:0px;} </style>
是的!你没看错!还是轮播图。这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白... position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none; position:absolute
position: relative; position: absolute; position: fixed; } 在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position还说了下面这三个值: /* 全局值 */ position: inherit; position: initial; position:...
position:relative} .pic_lists{float:left;width:8888px;height:106px;overflow:hidden;position:absolute;top:0px;left:0px} .btn_change{width:40px;height:60px;position:absolute;text-indent:-9999px;cursor:...
样式复制代码代码如下:#demo{position:relative;width:300px;border:1px solid #090;}#demo div{position:absolute;width:200px;height:100%;background-color:#f00;} 结构 复制代码代码如下:”demo”> <div>...
.box-163css{position:relative;height:330px;border:solid 1px #ddd;width:600px;margin:20px auto;} .picul{ width:100%; float:left;} .picul li{ width:115px; height:115px; float:left; margin:0 7px 25px 7px...
Relative与Absolute组合使用 小伙伴们学习了12-6小节的绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的...
position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了...
在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一、让图片的宽度或者高度等于容器... position: relative; } img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: tra