html - 哪个更好，变换: translate or Position : absolute

Question

我只是想根据其他人的经验了解您通常使用哪种解决方案来将元素定位在自然流之外？ - 转换:翻译 - position:absolute。 谢谢:)

Answer 1

视情况而定。

position:absolute 实际上可以和 transform:translate 一起工作。例如，如果您想放置一个 div(动态高度/宽度)，您可以执行以下操作:

<div id="mydiv">
    <!-- Dynamic content here meaning height and width could change -->
</div>

#mydiv {
    position: absolute;
    top: 50%; /* Top of element would appear in the centre */
    left: 50%; /* Left of element would appear in the centre */
    transform: translate(-50%, -50%); /* Bring the element centre to area centre */
    /* I'm lazy to make above lines cross browser but you shouldn't */
}

在上面的例子中，如果父元素是窗口的全高和全宽，则框将保持在中心。

希望这能给你一些启发。