时间戳

首页 > 解决方案 > 我在 css 中使用位置标签时遇到问题

html - 我在 css 中使用位置标签时遇到问题

问题描述

我想要一个容器，其中有一个块矩形，在该块内我想要 2 个矩形，1 个位于顶部，另一个位于底部，然后我想要在那个盒子旁边有一个圆圈。第一个容器位置必须固定，其他容器不得相互影响空间。我希望所有元素都有一个固定的位置，这样我就可以在任何我想要的地方输入文本而无需进行任何更改。我还想为 li 上的每个循环应用一个 php，因此这些元素必须是可滚动的。谢谢你。

.image{
    position: relative;
    background-color: #f2f2f2;
    display: block;
    box-shadow: 5px 5px 5px #aaaaaa;
    width: 480px;
    height: 640px;
    padding: 0.5px;
    margin-left:auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.top_bar{
    background-color: #3f51b5;
    position: absolute;
    display: block;
    box-shadow: 5px 5px 5px #aaaaaa;
    width: 478px;
    height: 52px;
    padding: 1px;
}

.middle_bar{
    background-color: #f2f2f2;
    position: absolute;
    display: block;
    width: 478px;
    height: 534px;
    padding: 1px;
    margin-top: 38px;
}

.bottom_bar{
    background-color: #3f51b5;
    position: absolute;
    display: block;
    box-shadow: 5px 5px 5px #aaaaaa;
    width: 478px;
    height: 45px;
    padding: 1px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1000px;

} 
.dot {
    background-color: #f50057;
    position: absolute;

    background-color: solid black;
    border-radius: 50%;
    box-shadow: 5px 5px 5px #aaaaaa;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.text_center_white {
    position: relative; 
    top: 50%;
    transform: translate(0,-50%);
    text-align: center;
    color: white;
    } 

.text_center_black {
    position: relative; 
    top: 50%;
    transform: translate(0,-50%);
    text-align: center;
    color: black;
    }
<html>
<head>
    <title>DS</title>
</head>
<body>
    <div class="image">     
            <div class="top_bar"> <div class="text_center_white">Text</div>
                <div class="bottom_bar">
                    <div class='middle_bar'> <div class="text_center_black" ><p>Hello</p></div>
                    <div class="dot"> <div class="text_center_white">< 33 ></div>

                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
</html>

标签： htmlcsscss-position

解决方案

您可以使用此代码在顶部创建一个矩形，在底部创建另一个矩形，并在较大的矩形中添加一个圆圈：

    <div style="position:absolute;height:50;width:100;top:0;left:0;background-color:blue">
    </div>
    
    <div style="position:absolute;height:50;width:50;top:200;left:0;background-color:yellow;border-radius:50%;">
    </div>
    <div style="position:absolute;height:50;width:100;bottom:0;left:0;background-color:yellow">
    </div>
    
</section>```

推荐阅读