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

效果: 代码: 效果:
  • kanaijidaan
  • kanaijidaan
  • 2015年10月07日 11:16
  • 1295

position:absolute相对哪个元素定位

应用了position: absolute的元素会循着节点树中的父(祖)元素来确定“根”,然后相对这个“根”元素来偏移。如果在其节点树中所有父(祖)元素都没有设置position属性值为relativ...
  • qq_26222859
  • qq_26222859
  • 2016年06月01日 19:11
  • 873

如何根据父级元素进行相对定位

需求:首先有个父级div,若干子元素如何根据父元素的位置进行相对定位?分析:看到这个需求,我首先想到的是position:relative;然而并不能满足需求。大家可以亲手试试,为啥不能满足呢?因为p...
  • zdavb
  • zdavb
  • 2015年09月17日 22:21
  • 5212

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

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

position属性之相对父元素定位

1、absolute(绝对定位) absolute是生成觉对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,right,bottom,left(简称TRBL) 定...
  • qq_26222859
  • qq_26222859
  • 2016年04月18日 15:53
  • 3981

Javascript获取页面元素相对和绝对位置

需求来自于一个同学的小小要求,某人问我能否实现自动点赞?!然后我首先想到的是console上运行js代码获取某个元素并模拟鼠标点击,大体一搜发现没有资料大体也有人说必须这个元素绑定的有onclick方...
  • u012514606
  • u012514606
  • 2016年04月25日 22:52
  • 3234

HTML中的几种定位方式

1,static(默认) 当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方。所以在不同的分辨率下,采用流式定位能...
  • hejisan
  • hejisan
  • 2016年09月12日 15:47
  • 6358

CSS-position:static/relative/absolute/fixed定位

css position:static/relative/absolute/fixed 定位
  • FE_FlyFish
  • FE_FlyFish
  • 2017年07月04日 00:49
  • 334

css position absolute 相对于父元素的设置方式

css position absolute 相对于父元素的设置方式 更多0 css 大家知道css的position absolute默认是根据documen...
  • biyaqian
  • biyaqian
  • 2015年06月25日 14:20
  • 310

CSS中position的absolute如何相对于父元素的位置进行定位

relative(相对)以及absolute(绝对)。 用absolute定位时,要把其上一级的元素样式属性position设置为relative。 也就是说,position的属性值的效果,直...
  • u010411264
  • u010411264
  • 2016年04月21日 10:47
  • 8813
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:position:absolute相对哪个元素定位
举报原因:
原因补充:

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