CSS 将 div 置于其他元素上
我正在尝试找到将一个 div 置于另一个 div 上的最佳方法，该方法使用“顶部”和“左侧”CSS 组件。调整浏览器窗口大小时，圆圈应始终位于框的中心，但在缩放时会稍微水平移动
这是我正在使用的代码； https://codepen.io/EarlGrey8/pen/LYVOQrY
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: relative;
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: 33%;
}
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
忽然笑4回答
-
慕容3067478
使圆在任何屏幕上居中。尝试以下 CSS。.moduleImage { left: 50%; transform: translateX(-50%);} -
潇湘沐
您可以使用 calc css3calc 参见示例：body { background-color: #908787;}.banner { position: fixed; width: 101%; margin: -1%; height: 35%; background-color: #76568e;}.moduleContainer { position: absolute; font-family: 'Bellota', cursive; background-color: #e2e2e2; top: 25%; left: 20%; border-style: solid; border-radius: 20px; border-color: #cacaca; width: 60%; height: 400px;}.moduleInner { display: inline-block; position: relative; top: -130px; width: 100%; height: 70%; }.moduleImage { position: relative; border-radius: 100%; background-color: #908787; height: 250px; width: 250px; top: -130px; left: calc(50% - 125px); /* just this line changed */}<!DOCTYPE html><html><head> <title></title> <link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet"> <link rel="stylesheet" href="simple.css"></head><body> <div class="banner"></div><div class="moduleContainer"> <div class="moduleImage"></div> <div class="moduleInner"></div> </div></body></html>一切都一样。就在.moduleImage课堂上我将 left 属性更改为left: calc(50% - 125px);125px 是元素宽度的一半。 -
慕无忌1623718
改变，.moduleImage财产。positiontransformbody { background-color: #908787;}.banner { position: fixed; width: 101%; margin: -1%; height: 35%; background-color: #76568e;}.moduleContainer { position: absolute; font-family: 'Bellota', cursive; background-color: #e2e2e2; top: 25%; left: 20%; border-style: solid; border-radius: 20px; border-color: #cacaca; width: 60%; height: 400px;}.moduleInner { display: inline-block; position: relative; top: -130px; width: 100%; height: 70%;}.moduleImage { position: absolute; /* change */ border-radius: 100%; background-color: #908787; height: 250px; width: 250px; top: -130px; left: 50%; transform: translateX(-50%); /* change */}<!DOCTYPE html><html><head> <title></title> <link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet"> <link rel="stylesheet" href="simple.css"></head><body> <div class="banner"></div> <div class="moduleContainer"> <div class="moduleImage"></div> <div class="moduleInner"></div> </div></body></html> -
慕姐8265434
更新你的代码.moduleContainer { display: flex; align-items: center; justify-content: center; position: absolute; font-family: 'Bellota', cursive; background-color: #e2e2e2; top: 50%; left: 20%; border-style: solid; border-radius: 20px; border-color: #cacaca; width: 60%; height: 400px;}.moduleInner { display: inline-block; height: 70%;}.moduleImage { border-radius: 100%; background-color: #908787; height: 250px; width: 250px;}我希望这个工作
随时随地看视频慕课网APP
相关分类
Html5