position:absolute相对哪个元素定位

原创 2016年06月01日 19:11:20

应用了position: absolute的元素会循着节点树中的父(祖)元素来确定“根”,然后相对这个“根”元素来偏移。如果在其节点树中所有父(祖)元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性(重点)


w3school说:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

也就是说

生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。
元素默认的定位值是static,所以往上找参照元素一直到根元素了。
如果是要相对第一个父元素定位,请为该父元素添加属性position: relative,或者添加position:absolute

示例代码:

<html>
<head>
  <style>
    *{margin:0;border:0;padding:0;}
    .head-photo
        {
            margin-top:100px;
            margin-left:100px;
            width:100px;
            height:120px;
            border:5px solid green;
            text-align:center;
            position:relative;
        }
    .head-photo div
        {
            position:absolute;
            top:15px;
            left:15px;
            display:block;
            z-index:10;
			border:2px solid red;
			width:50px;
			height:70px;
        }
 
  </style>

 </head>
 <body>
 <div class='head-photo'>
    <div></div>   
 </div>
 </body>
</html>

或者设置.head-photo的position为absolute
<html>
<head>
  <style>
    *{margin:0;border:0;padding:0;}
    .head-photo
        {
            margin-top:100px;
            margin-left:100px;
            width:100px;
            height:120px;
            border:5px solid green;
            text-align:center;
			position:absolute;
        }
    .head-photo div
        {
            position:absolute;
            top:15px;
            left:15px;
            display:block;
            z-index:10;
			border:2px solid red;
			width:50px;
			height:70px;
        }
 
  </style>

 </head>
 <body>
 <div class='head-photo'>
    <div></div>   
 </div>
 </body>
</html>


结果都是:




版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

position:absolute相对于谁定位以及当溢出时怎么隐藏

效果: 代码: 效果:

元素定位(1)--absolute与float

absolute:1.absolute具有包裹性2.位置跟随 ? 3.给某一元素添加position:absolute 1》不设置左右值:该元素在页面显示中仍旧处于原来位置;几个相邻元素同时绝对定...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

CSS:元素定位之position属性

position属性常用值有两个: 1. absolute : 设置此值后,可设置left和right的值,表示该元素在body标签中的绝对位置; 2. relative : 设置此值后,可设置...

IE6/7下绝对定位(position:absolute)元素消失

在IE6、7中如果一个浮动元素与绝对定位元素相邻的话,在某些情况下绝对定位元素将会消失。在网上找了一下,有如下解释: 1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/...

position属性absolute与relative 详解 不为人知的(fixed)绝对定位(fixed相对于浏览器窗口=不动的div)

From:http://www.cnblogs.com/wiseblog/articles/4352007.html 总结: 当一个标签打上position:absolute绝对标签后,当我们...

position:absolute relative 绝对定位与相对定位

CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置...

position:absolute relative 绝对定位与相对定位

CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的...

绝对定位 position:absolute,相对定位 position:relative

《1》 当我们要使用绝对定位的时候,必须要有两个条件 1》必须给父元素加定位属性,一般建议使用 position:relative(即:给父元素设为相对定位); 2》给子元素,加绝对定位positio...

CSS position绝对定位absolute relative

CSS position绝对定位absolute relative          DIV CSS position绝对定位absolute relative教程篇 常常使用...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)