我想要一个容器，其中有一个块矩形，在该块内我想要两个矩形，一个位于顶部，另一个位于底部，然后我想要在该框的侧面有一个圆圈。第一个容器的位置必须是固定的，并且其他容器的位置不能相互影响空间。我希望所有元素都有一个固定的位置，这样我就可以在不做任何更改的情况下在任何地方输入文本。我还想为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>您可以使用此代码在顶部和底部创建一个矩形，并在较大的矩形中添加一个圆：
<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>```