如何在其位置保留絕對定位的元素？

Question

當父級的高度發生變化時，如何保持一個絕對定位的元素（在頂部垂直居中：0;底部：0;以及margin：auto;）的位置？

元素是一個完全以垂直制表符為中心的img。 當用戶單擊垂直選項卡時，它會展開以顯示更多信息，這會將完美居中的圖像移動到現在在展開選項卡中的垂直居中。

Answer 1

是的，它可以通過css3實現。 請嘗試這個，你將解決你的伎倆。

<div class="responsive-container">
    <div class="dummy"></div>

    <div class="img-container">
        <img src="http://placehold.it/150x150" alt="" />
    </div>
</div>

這是頂部的css

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}

請嘗試讓我知道。

Answer 2

如果在這種情況下可以從css中刪除top，left，bottom，right參數 - 元素將保留在原位。

這些參數使其絕對相對於窗口定位，但是移除它們將元素放置在原來的位置。 然后設置寬度，高度和邊距將完成剩下的工作。

另一種選擇是使父元素位置：相對，絕對或固定。 然后將相對於孩子的位置進行計算。

Answer 3

如果你不介意一點JavaScript，這將做你想要的。 img最初位於該部分的垂直中間，但是當該部分的大小發生變化時，它將保持在原位。

 document.querySelector('.abs').dataset.top = document.querySelector('.abs').offsetTop; document.getElementById('more').onclick = function() { var img = document.querySelector('.abs'); if (document.getElementById('more').checked) { img.style.top = img.dataset.top+'px'; img.style.margin = '0'; } else { img.style.top = ''; img.style.margin = ''; } }; 

 section {position: relative;} #more ~ p {display: none;} #more:checked ~ p {display: block;} .abs { position: absolute; left: 50%; top: 0; bottom: 0; height: 40px; margin: auto 0; } 

 <section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <input id="more" type="checkbox"><label for="more"> Show more</label> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p> <img src="https://placehold.it/150x40" alt="150x40" class="abs"> </section> 

Answer 4

你試試這個。

 body,html { height:100%; margin:0; padding:0; } .second-div { width:30%; height:50%; background:red; position:absolute; top:0; bottom:0; margin:auto; } .first { width:60%; height:200px; position:relative; background:pink; } 

 <div class="first"> <div class="second-div"><div> </div> 

Answer 5

使用此選項指定任何對象的確切位置。

<style>
Position: absolute;
Top: 0px;
Left: 0px;
</style>

這會將對象鎖定在左上角。

然后用它來移動它：

<style> Transform: Translate(1px, 1px); </style>

這只是示例，修改它以適合您的格式（px，％，vh / vw或您使用的任何東西）:-)