javascript - HTML 中布局的问题
typecho
typecho 2017-06-30 09:58:16
0
6
922

对position:absoulte 这个属性理解不到位,希望有人能提供解答,感谢,

这里我给 子p 设置position:absoulte ,结果他父级的p所占空间消失

<p style="width: 40%; background-color: #aa0000; float: left">
      <p >
        <p style="position: absolute">
          111
        </p>
        <p style="position: absolute">
          222
        </p>
      </p>
    </p>
    <p style="width: 20%; background-color: #00aa00; float: left">222</p>
    <p style="width: 40%; background-color: #0000aa; float: left">333</p>

 
 <p style="width: 40%;height: 100px; background-color: #aa0000; float: left">
      <p >
        <p style="position: absolute">
          111
        </p>
        <p style="position: absolute">
          222
        </p>
      </p>
    </p>
    <p style="width: 20%; background-color: #00aa00; float: left">222</p>
    <p style="width: 40%; background-color: #0000aa; float: left">333</p>
    
   

typecho
typecho

Following the voice in heart.

全部回复(6)
三叔

因为当元素设置absolute的时候,已经脱离文档流了。在父元素内部是不占空间的

刘奇

你的第一个例子父元素是没有设置高度的,子元素也没有高度,所以不显示。

position:absolute

是绝对定位,脱离文档流,而且你没有设置top/right/bottom/left等值,所以同级的两个p会重叠

黄舟

CSS四种定位方式:

  1. static:默认定位(即无定位,文档流怎么排下来就怎么定位)

  2. relative:相对定位,相对于原始位置定位,所谓的原始位置,即relative:相对定位,相对于原始位置定位,所谓的原始位置,即static定位的位置

  3. absolute:绝对定位,相对于absolute:绝对定位,相对于static定位以外的第一个父元素定位。从当前元素开始向上查找定位元素直至根元素,无论遇到的第一个父级元素是relative还是absolute,或者是fixed定位的元素,当前元素就相对于该元素进行定位,并且这个父级元素不一定是当前元素的第一级父元素。如果没有找到任何非static的父级元素,则相对于根元素html定位以外的第一个父元素定位。从当前元素开始向上查找定位元素直至根元素,无论遇到的第一个父级元素是relative还是absolute,或者是

    定位的元素,当前元素就相对于该元素进行定位,并且这个父级元素不一定是当前元素的第一级父元素。如果没有找到任何非
  4. 的父级元素,则相对于根元素html进行定位。
  5. fixed

  6. :固定定位,相对于浏览器窗口定位

初学者记住上面这些就行了。

按w3school的说法:

设置为绝对定位的元素框
从文档流完全删除,并
相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
绝对定位使元素的位置与文档流无关,因此不占据空间。

relative的元素。(应该去查下w3c...衰)
什么是包含块?
containing block
css 包含块(Containing Box)
包含块是浏览器计算元素位置的一个虚拟的矩形区域,计算元素定位的起始位置是该矩形区域的左上角,也就是原点,坐标位置为(0,0),定位元素的topleft
引用中的内容我认为确切的说法应该是“相对于最近的已定位的包含块或初始包含块”,因为如果说法是“相对于包含块”,那为什么一定要至少是relative的元素。(应该去查下w3c...衰)

什么是包含块?

containing blockcss 包含块(Containing Box)包含块是浏览器计算元素位置的一个虚拟的矩形区域,计算元素定位的起始位置是该矩形区域的左上角,也就是原点,坐标位置为(0,0),定位元素的topleft相对于该原点确定。包含块就是元素定位的参考系。

可以认为这个矩形区域就是创建它的元素,但不是这个元素,只是虚拟的一个东西。🎜
<!-- p元素会创建一个包含块,用于计算p元素的尺寸和位置 -->
<!-- 可以认为包含块就是p元素 -->
<p>
    <p>Hello word.<p>
</p>
🎜🎜包含块只是用于计算元素的位置和尺寸。🎜🎜

为什么父级元素所占空间消失?

因为设置为position: absolute的元素脱离了文档流(normal flow),形成了独立的BFC。
页面中每个BFC都是独立的一块渲染区域,互不影响,但是它的位置信息,依然由它在normal flow中的包含块决定。
所谓的就是浏览器将元素在浏览器视口从上到下,从左到右一个一个的排版渲染出来,形成的一个类似水流一样 的概念。
默认一个页面只有一个“流”,就是文档流(normal flow),如果页面有定位元素、浮动元素,就会形成定位流、浮动流,而normal flow由文档的根元素html形成。
流你可以认为是桌面上叠起来的一张张纸,每一张纸都是一个“流”,只是这些纸不一定都是一样的大小。

我对BFC的理解 - wmsj100

習慣沉默

1.首相父元素没有设置固定的宽高。
2.子元素浮动时,跳出文档流,没办法撑开父元素,所以父元素不见了。

漂亮男人

这里你将绝对定位和浮动混合在使用,不方便初学者理解。两者应该分开更容易理解一些。

使用绝对定位的情况,要注意:

1.绝对定位absolute一般是要配合相对定位relative一起使用的。绝对定位到底是相对于哪个元素进行定位的,就给这个定位父级添加属性 position:relative; 
  要是没有设置这个定位父级,那么绝对定位的元素就会默认<html>是定位父级。

2.所有绝对定位的元素,一定要初始化top/left,即使是0,也要写上。top: 0; left:0;

3.绝对定位的元素相当于脱离了文档流,就不再占据空间了。所以自然也无法再撑起父级元素的宽高
 
  <!-- 这个父级p是定位父级,那么添加属性 position:relative; -->
  <p style='position:relative'>  
      <!-- 绝对定位元素初始化位置top/left -->
    <p style="position: absolute;top: 0;left: 0">
      111
    </p>
    <p style="position: absolute;top: 0;left: 0">
      222
    </p>
  </p>
  

关于浮动float的相关理解要另行百度啦~

淡淡烟草味

你给父级设个宽高,占位就还在了

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板