如何利用绝对定位元素的默认顶部

只需注意position:absolute元素可以根据其“直接父级”的位置分配默认值top，无论是否为relative。根据BoltClock，如何利用绝对定位元素的默认顶部

它仍然处于静态位置，不会去任何地方。

下面是代码：

.container { 
 
    height: 500px; 
 
    width: 300px; 
 
    position: relative; 
 
} 
 

 
.parent { 
 
    height: 200px; 
 
} 
 

 
.child { 
 
    height: 50px; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 

 
.blue { 
 
    background-color: #a6cee3; 
 
    border: 3px solid #1f78b4; 
 
} 
 

 
.green { 
 
    background-color: #b2df8a; 
 
    border: 3px solid #33a02c; 
 
} 
 

 
.red { 
 
    background-color: #fb9a99; 
 
    border: 3px solid #e31a1c; 
 
} 
 

 
.orange { 
 
    background-color: #fdbf6f; 
 
    border: 3px solid #ff7f00; 
 
} 
 

 
.violet { 
 
    background-color: #cab2d6; 
 
    border: 3px solid #6a3d9a; 
 
}

<div class="container blue"> 
 
    <div class="parent orange"></div> 
 
    <div class="parent violet"> 
 
    <div class="child red"></div> 
 
    </div> 
 
</div>

我想使绝对元件占据所述容器的“剩余空间”，即不包括第一个亲本。我的想法是设置bottom:0，我期望的是top已经设置了某种程度，如果bottom也设置好了，它可以计算高度并扩展剩余空间，但这并不奏效。

有没有解决方案？

来源

2017-02-16 Guigui

如果top和bottom（或left和或全部四者）均为自动，则绝对定位的框只能处于静态位置。您不能在一侧设置偏移量，并期望该框保持在静态位置，因为一旦您偏移了一个框它不再处于静态位置。

来源

2017-02-17 04:25:45 BoltClock

为什么不将width和height设置为绝对定位的子元素为100%？

请参阅this您的小提琴的混音。

来源

2017-02-17 03:56:41 SpyderScript

我想让它舍弃第一个父母，而不是覆盖整个容器 – Guigui

@Guigui我更新了小提琴。这是你在找什么？ – SpyderScript

我想要第一个父母（由您删除）也发生 – Guigui

如何利用绝对定位元素的默认顶部

回答

相关问题