位置DIV其父

頂上我想定位其父以上孩子的div如下圖所示：位置DIV其父

孩子沒有固定的高度。

相關代碼：

<footer id="parent"> 
    <div id="child" v-if="composing"> 
     <img src="/img/typing-indicator.gif" alt="typing" /> 
     <span>User is typing...</span> 
    </div> 
    <div id="input-container"> 
     ..... 
    </div>  
</footer>

來源

2017-07-28 jigarzon

'位置：在父relative'元素，子元素上的'position：absolute'和'top：-value'，其中value是您需要設置的任意數字。更好的解決方案是以您需要的方式構建DOM，而不是試圖對抗文檔流。另外，子元素的高度是否會動態變化？ – UncaughtTypeError

[看看這個問題]（https://stackoverflow.com/questions/7866804/position-children-div-above-parent-div?rq=1），[或許這個小提琴可以幫助你]（http：///jsfiddle.net/5JZGg/76/） – JiFus

給position: relative母公司和position: absolute; & bottom: 100%兒童

.parent { 
 
    position: relative; 
 
    background: pink; 
 
    margin-top: 20px 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    background: yellow; 
 
}

<div> 
 
    <footer class="parent"> 
 
    parent 
 
    <div class="child" v-if="composing"> 
 
     child 
 
    </div> 
 
    </footer> 
 
</div>

來源

2017-07-28 12:30:27

使用margin-top負其高度（例如30px）的：

.child{ 
    margin-top:-30px; 
}

來源

2017-07-28 12:17:16

您可以在父用position: absolute對孩子和position: relative，類似的東西應該工作：

.parent { 
    position: relative; 
    width: XXXX; 
    height: XXXX; 
} 

.child { 
    position: absolute; 
    bottom: 100%; 
    left: 0; 
    width: XXXX; 
    height: XXXX; 
}

您也可以使用上的位置絕對小孩變換屬性：

.child { 
    position: absolute; 
    top: 0; 
    transform: translateY(-100%); 
    left: 0; 
    width: XXXX; 
    height: XXXX; 
}

來源

2017-07-28 12:18:23

這個解決方案几乎不錯，除了'bottom：100％'應該用來代替負的'top'值。 'top：-100％;'意味着孩子會在父母身上放置與父母身高一樣多的像素 - 例如，如果父母身高是100px，那麼孩子的上邊緣會在父母上方開始100px。 '底部：100％'的演示：https：//jsfiddle.net/ds3kvz28/ '頂部：-100％'的演示：https：//jsfiddle.net/ds3kvz28/1/ – norin89

位置DIV其父

回答

相關問題