在此示例中,如果将主div 的 'left' 属性更改为类似 10% 的属性,则主体将与元素重叠。为什么?这让我发疯。
.HTML
<main>
<div>
I'm a block-level element of an unknown height and width, centered vertically within my parent.
</div>
</main>
.CSS
body {
background: #f06d06;
font-size: 80%;
padding: 20px;
}
main {
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
resize: both;
overflow: auto;
}
main div {
background: black;
color: white;
width: 50%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 10%;
padding: 20px;
resize: both;
overflow: auto;
}
任何帮助,不胜感激。谢谢!
如果您希望显示main div
而不被裁剪,则需要将main
上的溢出更改为overflow: visible
。可能需要进一步阐明您要实现的目标。:)
它与转换属性冲突,请尝试以下操作:
main div {
background: black;
color: white;
width: 50%;
/* transform: translate(-50%, -50%);*/
position: absolute;
top: 50%;
left: 10%;
padding: 20px;
resize: both;
overflow: auto;
}
很确定这是您正在做的翻译,使其达到 -40%。
在这种情况下,请从main
中删除overflow:auto
:
main {
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
resize: both;
/* overflow: auto; */
}