`

position=absolute之相对父元素定位

    博客分类:
  • css
阅读更多
1、问题:

如果 position : absolute ,如何又相对定位?
就是相对父元素,的绝对定位。


2、答案

当 父元素 的 position 设为 relative 时,
其子元素的 absolute position 是按照父元素的相对位置来的


3、示例
<html><head>
<style type="text/css">   
         .pre {
                    color:red;
         }
         .parent{             
                    position:relative;
                    left:0px;
                    top:0px;
                    margin:0;
                    padding:0;                
         }        
         h3.pos_abs{     
                    position:absolute;
                    left:0px;
                    top:0px;
                    margin:0;
                    padding:0;               
         }
</style>
   </head>
   <body>
    <p class='pre'>我没有被下面的元素覆盖</p>
    
    <div class="parent">
       <h5 class="pos_abs">
           我虽然使用了绝对定位,<br>
           但我的父元素的 position属性为 relative,<br>
           所以我仍然在下面
        </h5>
    </div>
</body></html>

效果:




分析:

h2标题的 class 属性,position设为 absolute ,其 top = left = 0 ,
如果没有父元素,它应该显示在 页面最左上角,覆盖掉 p 的内容。

实际,由于它的父元素的 position 设置为 relative,排在了 p 的下面 ,所以它的 绝对位置,是相对于父元素的位置的。故:显示在 p 的下方。



4、api参考

下面是w3school的一段说明:


absolute:相对于 static 定位以外的第一个父元素进行定位。
          也就是父元素的position取值可以是:absolute fixed relative inherit
          显然,最可能和常用的取值是 relative




5、原理

绝对定位

绝对定位使元素在文档流中不占据任何空间。
(文档流中的其它元素的布局就像绝对定位的元素不存在一样)。

这一点与相对定位不同,相对定位的元素实际上被看作普通流定位模型的一部分,
它占据普通流中的空间,也会影响到普通流中其它元素的布局。



6、对比、拓展

float
css 另外一个属性 float 也会使元素脱离文档流,不占据普通流中的空间。

注意:
      float 属性只控制左右移动。不控制上下移动。
      也就是在当前位置的基础上向左, float:left ,或 向右 float:right
      而不会向上或向下调整位置。

http://www.w3school.com.cn/css/css_positioning_floating.asp





clear属性
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。(自己新起一行)
下面的例子中(右边第一个图),对段落二使用了clear:left




比较:

position = absolute 可以相对于position = relative 的父元素内任意定位。
而 float 则是控制元素左右滑动,具有对齐的效果。



注意:
如果设置了 position = absolute,但是 没有给其指定 left、right,或者是 top、bottom,
则元素的 left 和 top 会 按 position = static 时计算。

这一点有时很有用。
比如 top 不指定,则 top 的值是动态按文档的相对位置分配的。






-

引用请注明
原文出处: http://lixh1986.iteye.com/blog/1948337



-
  • 大小: 81.5 KB
  • 大小: 17 KB
  • 大小: 10.5 KB
  • 大小: 4.8 KB
  • 大小: 4.4 KB
  • 大小: 8 KB
  • 大小: 4.1 KB
分享到:
评论

相关推荐

    CSS让子容器超出父元素(子容器悬浮在父容器效果)

    前言 有时候,我们需要如下图这样一个悬浮效果需求: 实现 在标准的正常的情况下,只能使用 绝对定位 来完成。 第一步:父容器定位设置为 relative(相对.../*父元素&gt;相对定位*/ } #b{ width: 150px; height:50px;

    详解CSS 子元素相对于父元素固定定位解决方案

    这样,子元素就会相对于这个父元素定位,而不是相对于文档流。 2. **滚动条处理**:如果父元素设置了`overflow: auto;`,那么它内部的滚动条只会影响父元素的内容,而不会影响到绝对定位的子元素。这意味着子元素会...

    css子元素相对父元素进行定位的实现

    ### CSS子元素相对父元素进行定位的实现 #### 解决方案概述 在Web开发中,经常需要对页面中的元素进行精确的布局控制。CSS提供了多种定位机制,其中相对定位(`relative`)与绝对定位(`absolute`)是两种常用的...

    CSS教程——元素定位

    使用 position: relative 定位父元素,position: absolute 定位子元素时,子元素将相对于父元素进行定位。例如: ```html &lt;div id="div-1"&gt; &lt;div id="div-1a"&gt;this is div-1a element. ``` ```css #div-1 { ...

    CSS 绝对定位属性absolute用法初探

    相反,它会相对于最近的已定位祖先元素(即拥有非`static`定位的父元素,如`relative`、`absolute`或`fixed`)进行定位。如果没有这样的祖先,元素将相对于浏览器窗口或视口(初始包含块)定位。 下面是一个简单的...

    css的position里的relative和absolute的区别.docx

    absolute 定位的元素是相对于 static 定位以外的第一个父元素举行定位的,而 relative 定位的元素是相对于其正常位置举行定位的。 在实际应用中,我们可以根据需要选择使用 absolute 或 relative 定位。例如,如果...

    网页制作中层相对定位的实现方法

    在这种情况下,子层的相对定位是基于其最近的具有定位属性的父层来进行的。例如,如果有一个外部层使用了`position: relative;`,那么其内部的任何子层(使用`position: absolute;`)都会相对于这个外部层进行定位。...

    position浮动定位

    当我们选择不同的 position 值时,元素的排版方式将发生变化,例如从 static 到 absolute,元素将从文档流中脱离,并相对于其父元素进行绝对定位。 position 属性是 CSS 中一个非常重要的属性,掌握其使用方法可以...

    css position: absolute、relative详解

    总结来说,position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素(或者初始包含块)进行定位,而relative则让元素保持在文档...

    css定位学习小结.md

    属性:position 作用:检索或者设置元素的定位方式(改变元素位置的属性) ... b : 假如 当前没有父元素 或者 父元素没有定位的情况下,以整个文档为参照物。 c : 绝对定位,脱离文档流、不占据空间

    绝对定位元素被遮挡的解决方法

    绝对定位元素即使z-index值很高,如果其设置相对定位的父元素没有设置z-index值的话,其可能(这种可能性当然是布局存在遮盖的时候)会被后面设置了相对定位的元素遮挡(即使后面的相对定位的元素没有设置z-index值...

    获取元素位置的position()与offset()方法区别介绍

    而offset()方法则总是返回元素相对于文档的偏移量,其返回的左边距和上边距与页面在加载时的状态有关,不受父元素定位方式的影响。这意味着,即使父元素是静态定位,使用offset()方法也能得到元素相对于文档的位置。...

    绝对定位+相对定位的妙用——一秒搞清子父级关系

    在网页设计和开发中,布局和元素定位是至关重要的部分,尤其对于动态和响应式的页面。"绝对定位+相对定位的妙用"是CSS布局技术中的核心概念,它可以帮助我们精确控制网页元素的位置,实现复杂而精致的设计效果。下面...

    关于CSS position属性值absolute,relative的解释.zip

    `后,可以使用这些属性使其在父元素内特定位置定位。 一个常见的误解是认为`position: relative;`是元素的默认属性。实际上,元素的默认`position`是`static`,这意味着元素按照正常的流顺序排列,不受`top`、`...

    divcss盒子之绝对定位和相对定位.docx

    元素的位置通过left, right, top, bottom属性指定,即使父元素移动,已定位的子元素也会跟随移动。 3. 相对定位(relative):相对定位保留元素在文档流中的原始位置,然后通过left, right, top, bottom属性相对于...

    css-绝对定位的参考对象

    在CSS布局中,绝对定位(absolute positioning)是一种强大的定位机制,允许元素脱离其正常文档流,并根据相对于其他元素或浏览器窗口进行定位。本篇将深入探讨绝对定位的参考对象、工作原理及其在实际开发中的应用...

    HTML5&CSS3网页制作:绝对定位.pptx

    在CSS中,绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素进行定位,若所有父元素都没有定位,则依据body根元素(浏览器窗口)进行定位。绝对定位使元素的位置与文档流无关,因此不占据空间。...

    深入理解css中position属性及z-index属性(推荐)

    4. absolute定位:绝对定位元素的位置是相对于其最近的已定位(非static)父元素。如果没有这样的父元素,那么它相对于整个html文档进行定位。使用absolute定位的元素不会保留它在文档流中的原始空间,因此可能与...

    css定位绝对相对定位

    `时,它会脱离正常的文档流,并尽可能向左或向右移动,直到碰到父元素的边界或其他浮动元素的边界。 例如: ```css .float-left { float: left; } .float-right { float: right; } ``` - **特点**: - ...

Global site tag (gtag.js) - Google Analytics