猿问

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>


忽然笑
浏览 170回答 4
4回答

慕容3067478

使圆在任何屏幕上居中。尝试以下 CSS。.moduleImage {&nbsp; &nbsp; left: 50%;&nbsp; &nbsp; transform: translateX(-50%);}
0

潇湘沐

您可以使用 calc css3calc 参见示例：body {&nbsp; &nbsp; background-color: #908787;}.banner {&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; width: 101%;&nbsp; &nbsp; margin: -1%;&nbsp; &nbsp; height: 35%;&nbsp; &nbsp; background-color: #76568e;}.moduleContainer {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; font-family: 'Bellota', cursive;&nbsp; &nbsp; background-color: #e2e2e2;&nbsp; &nbsp; top: 25%;&nbsp; &nbsp; left: 20%;&nbsp; &nbsp; border-style: solid;&nbsp; &nbsp; border-radius: 20px;&nbsp; &nbsp; border-color: #cacaca;&nbsp; &nbsp; width: 60%;&nbsp; &nbsp; height: 400px;}.moduleInner {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; top: -130px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 70%;&nbsp; &nbsp;&nbsp;}.moduleImage {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; border-radius: 100%;&nbsp; &nbsp; background-color: #908787;&nbsp; &nbsp; height: 250px;&nbsp; &nbsp; width: 250px;&nbsp; &nbsp; top: -130px;&nbsp; &nbsp; left: calc(50% - 125px); /* just this line changed */}<!DOCTYPE html><html><head>&nbsp; &nbsp; <title></title>&nbsp; &nbsp; <link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">&nbsp; &nbsp; <link rel="stylesheet" href="simple.css"></head><body>&nbsp; &nbsp; <div class="banner"></div><div class="moduleContainer">&nbsp; &nbsp; <div class="moduleImage"></div>&nbsp; &nbsp; <div class="moduleInner"></div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</div></body></html>一切都一样。就在.moduleImage课堂上我将 left 属性更改为left: calc(50% - 125px);125px 是元素宽度的一半。
0

慕无忌1623718

改变，.moduleImage财产。positiontransformbody {&nbsp; background-color: #908787;}.banner {&nbsp; position: fixed;&nbsp; width: 101%;&nbsp; margin: -1%;&nbsp; height: 35%;&nbsp; background-color: #76568e;}.moduleContainer {&nbsp; position: absolute;&nbsp; font-family: 'Bellota', cursive;&nbsp; background-color: #e2e2e2;&nbsp; top: 25%;&nbsp; left: 20%;&nbsp; border-style: solid;&nbsp; border-radius: 20px;&nbsp; border-color: #cacaca;&nbsp; width: 60%;&nbsp; height: 400px;}.moduleInner {&nbsp; display: inline-block;&nbsp; position: relative;&nbsp; top: -130px;&nbsp; width: 100%;&nbsp; height: 70%;}.moduleImage {&nbsp; position: absolute; /* change */&nbsp; border-radius: 100%;&nbsp; background-color: #908787;&nbsp; height: 250px;&nbsp; width: 250px;&nbsp; top: -130px;&nbsp; left: 50%;&nbsp; transform: translateX(-50%); /* change */}<!DOCTYPE html><html><head>&nbsp; <title></title>&nbsp; <link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">&nbsp; <link rel="stylesheet" href="simple.css"></head><body>&nbsp; <div class="banner"></div>&nbsp; <div class="moduleContainer">&nbsp; &nbsp; <div class="moduleImage"></div>&nbsp; &nbsp; <div class="moduleInner"></div>&nbsp; </div></body></html>
0

慕姐8265434

更新你的代码.moduleContainer {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; font-family: 'Bellota', cursive;&nbsp; &nbsp; background-color: #e2e2e2;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; left: 20%;&nbsp; &nbsp; border-style: solid;&nbsp; &nbsp; border-radius: 20px;&nbsp; &nbsp; border-color: #cacaca;&nbsp; &nbsp; width: 60%;&nbsp; &nbsp; height: 400px;}.moduleInner {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; height: 70%;}.moduleImage {&nbsp; &nbsp; border-radius: 100%;&nbsp; &nbsp; background-color: #908787;&nbsp; &nbsp; height: 250px;&nbsp; &nbsp; width: 250px;}我希望这个工作
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答