Question

我正在尝试在纯HTML和CSS中重新创建此图像，或者如果nessascary添加一些小的javascript：

LCARS image

这是我到目前为止所拥有的：

jeffs beautiful unfinished handywork

我正试图在中心附近移动那个小橙色框以匹配蓝线，但她不会让步＃/ p>

.middletop {
    position: absolute;
    background-color: #fe9800;
    width: 26px;
    height: 16px;
    left: 471px;
}

这是整个代码：

的layout.html

<html>
<head>
    <title>LCARS</title>
    <link rel="stylesheet" href="static/style.css"/>
</head>

<body>
<div class="topleft">
</div>

<div class="topleft2">
</div>  

<div class="middletop">
</div>

<div class="bottomleft">
</div>

<div class="bottomleft2">
</div>

<div class="bottomleft3">
</div>

<div class="bottomleft4">
</div>

<div class="content">
</div>

<div class="content2">
</div>

</body>

<footer>


</footer>
</html>

的style.css

body {
    background-color: black;
}

.topleft {
    background-color: #c498c4;
    width: 126px;
    height: 90px;
}

.topleft2 {
    margin-top: 5px;
    background-color: #9b98fe;
    width: 463px;
    height: 112px;
    border-radius: 0 0 0 70px;
}

.bottomleft {
    margin-top: 7px;
    background-color: #cc6061;
    width: 463px;
    height: 91px;
    border-radius: 70px 0 0 0;
}

.bottomleft2 {
    margin-top: 5px;
    background-color: #cc6061;
    width: 126px;
    height: 137px;
}

.bottomleft3 {
    margin-top: 5px;
    background-color: #fe9800;
    width: 126px;
    height: 38px;
}

.bottomleft4 {
    margin-top: 5px;
    background-color: #ffa873;
    width: 126px;
    height: 180px;
}

.middletop {
    position: absolute;
    background-color: #fe9800;
    width: 26px;
    height: 16px;
    left: 471px;
}

.content {
    background-color: /*#6D6A6A*/black;
    position: absolute;
    left: 127px;
    top: 239px;
    border-radius: 35px;
    width: 900px;
    height: 700px;
}

.content2 {
    background-color: black;
    position: absolute;
    left: 127px;
    top: -2;
    border-radius: 0 0 0 35px;
    width: 900px;
    height: 200px;
}

Answer 1

使用css top:100px;。要看到它使用：z-index:100;

Answer 2

虽然我建议广泛使用绝对定位，但如果您已经这样做并且对此感到满意，那么您只需设置top即可。去：

.middletop {
    position: absolute;
    background-color: #fe9800;
    width: 26px;
    height: 16px;
    left: 476px;
    top:199px /* <-- this is what I added */
}

<强> Here is a demo.

Answer 3

尝试使用

 position: absolute;
 top: /*the amount of px from the top to your wanted location*/;
 left: /*the amount of px from the left to your wanted location*/;
 z-index:1000; /*<= this is to be above all other elements*/

html＆amp; css - 将div定位在精确坐标处

3 个答案: