javascript - HTML 中布局的问题

问题描述

问 题

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

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

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

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

解决方案

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

这篇关于javascript - HTML 中布局的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！