<div > <div ></div> </div>
#outer { position: relative; width: 200px; height: 200px; margin: 20px auto; border: 2px solid #c00; } #inner { position: absolute; left: 50px; top: 50px; width: 96px; height: 96px; background-color: #ddc; border: 2px solid #00c; }
#inner { position: absolute; left: 50px; right: 50px; top: 50px; bottom: 50px; background-color: #ddc; border: 2px solid #00c; }
// expands and contracts the inner box window.onload = function() { var inner = document.getElementById("inner"); var offset = 100, dir = -1; setInterval(function() { inner.style.left = inner.style.right = inner.style.top = inner.style.bottom = offset+"px"; offset += dir; if (offset == 0 || offset == 100) dir = -dir; }, 10); }
中起作用,CSS中的“位置:絕對”屬性從正常文檔流中刪除元素,並將其定位在指定位置相對於其最接近的位置祖先或對初始包含的塊。可以使用“頂部”,“右”,“底部”和“左”屬性四處移動定位的元素。但是,如果沒有“靜態”以外的祖先元素具有其他位置,則使用最初的包含塊。這些屬性僅對定位元素有影響。他們指定元素和其包含元素的一個或多個側面之間的距離。例如,“頂部:20px”是指元素的頂部邊緣距其包含元素的頂部邊緣20px。首先,將“左:50%”設置為將元素的左邊緣移至父母的中心。然後,使用“變換:translatex(-50%)”將元素拉回其自身寬度的左側一半,有效地將其歸為中心。
> css如何處理重疊元素?
使用“ z index”屬性重疊元素。此屬性指定元素的堆棧順序,該元素是其在z軸上的位置。具有較高“ Z index”的元素將顯示在元素的前面,較低的“ z index”。 > CSS中的初始包含塊是什麼?css中的初始包含塊是包含塊的塊中的塊(html)居住在哪個塊中。它通常是瀏覽器窗口的視口,但是如果根元素的“溢出”屬性不是“可見的”,也可以是頁面框。
>>
>我如何使元素保持其長寬比,因為它重新調整了?
以上是CSS中絕對元素尺寸的兩種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!