Html 当我缩小屏幕时，css元素会重叠_Html_Css

Html 当我缩小屏幕时，css元素会重叠

html css

Html 当我缩小屏幕时，css元素会重叠,html,css,Html,Css,当我调整屏幕大小时，元素的大小正在调整。我试着用position:relative，但它仍在重叠。另外，如果我调整它的大小，背景图像会像两个一样被分割。有人能帮我一下吗？我不知道我犯了什么错误。在下面发布html和css代码： <body style="background-image: url(./img/bkgrnd.png);background-size: cover;"> <h3>welcome user!!</h3> <b

当我调整屏幕大小时，元素的大小正在调整。我试着用position:relative，但它仍在重叠。另外，如果我调整它的大小，背景图像会像两个一样被分割。有人能帮我一下吗？我不知道我犯了什么错误。在下面发布html和css代码：

<body style="background-image: url(./img/bkgrnd.png);background-size: cover;">
    <h3>welcome user!!</h3>
    <button class="ssystem">System</button>
    <button class="sub">Sub-System</button>
    <button class="subsub">Sub-Sub-System</button>
    <div class="box" id="sys">
        <select>
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
        </select>
    </div>
    <div class="box1" id="sub">
        <select>
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
        </select>
    </div>
    <div class="box2" id="sub1">
        <select>
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
        </select>
</div>
<input type="submit" value="Submit" id="button">
</body>

您可以将身体背景图像更改为不重复，如下所示：

<body style="background-image: url(./img/bkgrnd.png);background-size: cover;background-repeat: no-repeat;">

我在flexbox中添加了您的一些元素，但我不确定您需要的结果是什么，欢迎您修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {

margin: 0;
padding: 0;
background: #262626;
position:relative;
max-width: 100vw;
}

h3
{
text-align: right;
color: #C0C0C0;
padding-top: 10px;
}
.box {
position:relative;
/* top: 40%;
left: 60%; */
/* transform: translate(-50%, -50%); */
}

.box1 {
position:relative;
/* top: 50%;
left: 60%; */
/* transform: translate(-50%, -50%); */
}

.box2 {
position:relative;
/* top: 60%;
left: 60%; */
/* transform: translate(-50%, -50%); */
}

.box select {
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.box1 select {
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.box2 select {
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.ssystem
{
position:relative;
/* top:40%; */
/* left: 41%; */
/* transform: translate(-50%, -50%); */
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.sub
{
position:relative;
top:50%;
/* left: 41%; */
/* transform: translate(-50%, -50%); */
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.subsub
{
position:relative;
top:60%;
/* left: 41%; */
/* transform: translate(-50%, -50%); */
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.selections_holder {
 display:flex;
 align-items: center;
 justify-content: center;
 flex-direction: row;
}

.system-buttons-holder {
 display:flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.box-holder {
 display:flex;
 align-items: center;
 justify-content: flex-start;
 flex-direction: column;
}

.submit_button_holder {
 padding-top: 30px;
 display:flex;
 align-items: center;
 justify-content: center;
 flex-direction: row;
}

#button
{
background: #a9a9a9;
color: #fff;
position: absolute;
height:30px;
width:84px;
/* left:63%;
top:70%; */
border: none;
color: arial;
font-size: 16px;

}
#button:hover
{
background: red;
cursor: pointer;
}
    </style>
</head>

    <body style="background-image: url(./img/bkgrnd.png);background-size: cover;background-repeat: no-repeat;">
        <h3>welcome user!!</h3>

       <div class="selections_holder">
        <div class="system-buttons-holder">
            <button class="ssystem">System</button>
            <button class="sub">Sub-System</button>
            <button class="subsub">Sub-Sub-System</button>
        </div>

        <div class="box-holder">

        <div class="box" id="sys">
            <select>
                <option>AAA</option>
                <option>BBB</option>
                <option>CCC</option>
            </select>
        </div>
        <div class="box1" id="sub">
            <select>
                <option>AAA</option>
                <option>BBB</option>
                <option>CCC</option>
            </select>
        </div>
        <div class="box2" id="sub1">
            <select>
                <option>AAA</option>
                <option>BBB</option>
                <option>CCC</option>
            </select>
    </div>
    </div>
</div>
<div class="submit_button_holder">
    <input type="submit" value="Submit" id="button">
</div>
</body>
</html>


文件
身体{
保证金：0；
填充：0；
背景：#262626；
位置：相对位置；
最大宽度：100vw；
}
h3
{
文本对齐：右对齐；
颜色：#C0C0；
填充顶部：10px；
}
.盒子{
位置：相对位置；
/*最高：40%；
左：60%*/
/*转换：翻译（-50%，-50%）*/
}
.box1{
位置：相对位置；
/*最高：50%；
左：60%*/
/*转换：翻译（-50%，-50%）*/
}
.box2{
位置：相对位置；
/*最高：60%；
左：60%*/
/*转换：翻译（-50%，-50%）*/
}
.选择框{
背景：#A9A9；
颜色：#fff；
填充：10px；
宽度：250px；
高度：35px；
边界：无；
字体大小：15px；
盒影：0 5px25px rgba（0,0,0,5）；
-webkit外观：边框；
大纲：无；
}
.box1选择{
背景：#A9A9；
颜色：#fff；
填充：10px；
宽度：250px；
高度：35px；
边界：无；
字体大小：15px；
盒影：0 5px25px rgba（0,0,0,5）；
-webkit外观：边框；
大纲：无；
}
.box2选择{
背景：#A9A9；
颜色：#fff；
填充：10px；
宽度：250px；
高度：35px；
边界：无；
字体大小：15px；
盒影：0 5px25px rgba（0,0,0,5）；
-webkit外观：边框；
大纲：无；
}
.系统
{
位置：相对位置；
/*最高：40%*/
/*左：41%*/
/*转换：翻译（-50%，-50%）*/
背景：#A9A9；
颜色：#fff；
填充：10px；
宽度：250px；
高度：35px；
边界：无；
字体大小：15px；
盒影：0 5px25px rgba（0,0,0,5）；
-webkit外观：边框；
大纲：无；
}
.sub
{
位置：相对位置；
最高：50%；
/*左：41%*/
/*转换：翻译（-50%，-50%）*/
背景：#A9A9；
颜色：#fff；
填充：10px；
宽度：250px；
高度：35px；
边界：无；
字体大小：15px；
盒影：0 5px25px rgba（0,0,0,5）；
-webkit外观：边框；
大纲：无；
}
.亚潜艇
{
位置：相对位置；
最高：60%；
/*左：41%*/
/*转换：翻译（-50%，-50%）*/
背景：#A9A9；
颜色：#fff；
填充：10px；
宽度：250px；
高度：35px；
边界：无；
字体大小：15px；
盒影：0 5px25px rgba（0,0,0,5）；
-webkit外观：边框；
大纲：无；
}
.U形夹持器{
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：行；
}
.系统按钮支架{
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
}
.盒子架{
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
弯曲方向：立柱；
}
.提交按钮夹{
填充顶部：30px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：行；
}
#钮扣
{
背景：#A9A9；
颜色：#fff；
位置：绝对位置；
高度：30px；
宽度：84px；
/*左：63%；
最高：70%*/
边界：无；
颜色：arial；
字体大小：16px；
}
#按钮：悬停
{
背景：红色；
光标：指针；
}
欢迎用户！！
系统
子系统
子系统
AAA
BBB
CCC
AAA
BBB
CCC
AAA
BBB
CCC

仍然存在同样的问题，已附加上面的图像。欢迎使用堆栈溢出！定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。检查我是否试图调整它仍然重叠。输出应与发布的内容相同，且不重叠两个框。请尝试修改后的htmlI已编辑我的CSS，这正是我在调整窗口大小时希望不重叠的输出。正如你所说，我尝试了下面的链接，但没有太大帮助……”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {

margin: 0;
padding: 0;
background: #262626;
position:relative;
max-width: 100vw;
}

h3
{
text-align: right;
color: #C0C0C0;
padding-top: 10px;
}
.box {
position:relative;
/* top: 40%;
left: 60%; */
/* transform: translate(-50%, -50%); */
}

.box1 {
position:relative;
/* top: 50%;
left: 60%; */
/* transform: translate(-50%, -50%); */
}

.box2 {
position:relative;
/* top: 60%;
left: 60%; */
/* transform: translate(-50%, -50%); */
}

.box select {
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.box1 select {
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.box2 select {
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.ssystem
{
position:relative;
/* top:40%; */
/* left: 41%; */
/* transform: translate(-50%, -50%); */
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.sub
{
position:relative;
top:50%;
/* left: 41%; */
/* transform: translate(-50%, -50%); */
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.subsub
{
position:relative;
top:60%;
/* left: 41%; */
/* transform: translate(-50%, -50%); */
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.selections_holder {
 display:flex;
 align-items: center;
 justify-content: center;
 flex-direction: row;
}

.system-buttons-holder {
 display:flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.box-holder {
 display:flex;
 align-items: center;
 justify-content: flex-start;
 flex-direction: column;
}

.submit_button_holder {
 padding-top: 30px;
 display:flex;
 align-items: center;
 justify-content: center;
 flex-direction: row;
}

#button
{
background: #a9a9a9;
color: #fff;
position: absolute;
height:30px;
width:84px;
/* left:63%;
top:70%; */
border: none;
color: arial;
font-size: 16px;

}
#button:hover
{
background: red;
cursor: pointer;
}
    </style>
</head>

    <body style="background-image: url(./img/bkgrnd.png);background-size: cover;background-repeat: no-repeat;">
        <h3>welcome user!!</h3>

       <div class="selections_holder">
        <div class="system-buttons-holder">
            <button class="ssystem">System</button>
            <button class="sub">Sub-System</button>
            <button class="subsub">Sub-Sub-System</button>
        </div>

        <div class="box-holder">

        <div class="box" id="sys">
            <select>
                <option>AAA</option>
                <option>BBB</option>
                <option>CCC</option>
            </select>
        </div>
        <div class="box1" id="sub">
            <select>
                <option>AAA</option>
                <option>BBB</option>
                <option>CCC</option>
            </select>
        </div>
        <div class="box2" id="sub1">
            <select>
                <option>AAA</option>
                <option>BBB</option>
                <option>CCC</option>
            </select>
    </div>
    </div>
</div>
<div class="submit_button_holder">
    <input type="submit" value="Submit" id="button">
</div>
</body>
</html>