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相对于谁定位以及当溢出时怎么隐藏

效果: 代码: 效果:

position之absolute定位深入理解

和float是兄弟在我们写样式的时候会发现使用float和absolute的时候,会发现都会出现高度塌陷的问题,和脱离文档流的情况,而且你如果设置了的话就会表现出类似于display:inline-b...
  • sufubo
  • sufubo
  • 2016年03月12日 00:26
  • 1849

正则表达式30分钟入门教程

本文目标 30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你可以在自己的程序或网页里使用它。 正则表达式到底是什么? 在编写处理字符串的程序或网页时,经常会有查找符合某...

koa2实现mysql数据库分页

1,nodejs6.x版本不支持ES6 nodejs6下使用koa2 http://www.cnblogs.com/dojo-lzz/p/6870106.html 2,windows下mysq...

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

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

CSS:元素定位之position属性

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

元素定位(position属性值)有哪些?

本题点评在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位。所以本...

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绝对标签后,当我们...
  • henrypt
  • henrypt
  • 2016年12月02日 10:39
  • 1801

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

CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:position:absolute相对哪个元素定位
举报原因:
原因补充:

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