在 CSS 中同时使用位置和显示的行为是啥？ [复制]

Posted 2023-03-21

【中文标题】在 CSS 中同时使用位置和显示的行为是啥？ [复制]

【英文标题】：What is the behaviour of using position and display together in CSS? [duplicate]在 CSS 中同时使用位置和显示的行为是什么？ [复制]

【发布时间】：2021-05-18 19:25:31

【问题描述】：

我正在尝试在页面底部创建一个 100% 宽度的页脚。使用position: absolute;。我可以使用给定的代码实现位于底部的页脚。然而，即使我添加了display: block;，我也无法获得 100% 宽度的页脚。我想知道在定位方面一起使用这两个是什么。例如位置是否覆盖显示值？提前谢谢你。

footer 
    text-align: right;
    position: absolute;
    /* display: block; */
    bottom: 0%;
    right: 0%;
    background-color: rgba(232, 232, 228, 0.5);
    border: 1px solid #fcd5ce;

【参考方案1】：

position: absolute 元素的行为与 display: block 元素的行为相同，因此您的 display 无效。这是一个很好的解释：CSS: display:inline-block and positioning:absolute

设置width: 100% 应该可以解决您的问题。