Проблема с созданием адаптивных перекрывающихся Divs

ProgramBox

Проблема с созданием адаптивных перекрывающихся Divs

Post author:admin
Запись опубликована:6 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Приведенное выше изображение показывает браузер размером со смартфон и, следовательно, растянутое пространство, right вызванное наложением синих и красных divs, которые я поместил ниже. Моей главной целью здесь было заставить эти разделы также уменьшаться вместе с экраном, но когда я попытался использовать свойства flex, это дезориентировало всякий раз, когда страница уменьшалась с размера рабочего стола. Кроме того, я попробовал проценты, но размещение divs в позиции после использования отношения процента к размеру оказалось довольно неудачным.

Коды для изображения приведены ниже. Большая помощь была бы признательна.

HTML

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acadera Renewed</title>
    <link rel="stylesheet" href="Acadera Imp.css">
</head>
<body>
    <div class="head_section">
        <div id="top_layout">
           <center>
           <ul>
            <li><a>Home</a></li>
            <li><a>Pages</a></li>
            <li> <a>Services</a></li>
            <li><a>Gallary</a></li>
            <li><a>Blog</a></li>
            <li><a>Contact</a></li>
            <li><a>About</a></li>
       
            <li><input type="text" placeholder="Search"></input></li>
        </ul>
    </center>
        </div>

        <h1>WELCOME TO ACADERA</h1>
        <p>We bring you the best there is to offer</p>
       <center><input type="button" class= "btn" value="GET STARTED" ></input></center>
        <div class="lower_section">
           <center>
           <ul class="two">
            <li id="lower"><a href="" class="lower">Akan</a></li>
            <li id="lower"><a href="" class="lower">Uwem</a></li>
            <li id="lower"><a href="" class="lower">Itoro</a></li>
        </ul>
        </center>
        </div>
    </div>
    
   <div class="contain">
       <div class="box red"> </div>
       <div class="box blue"></div>
    </div>
</body>
</html>

CSS

 
*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

 body{
    background-color: white;
    overflow: auto;
    background-attachment: scroll;
    min-width: 100%;
} 

.head_section{
    position: relative;
    z-index: 1;
    height: 32rem;
    width: 100%;
    background-color: black;
}

.head_section::before{
    content: "";
    z-index: -1;
    position: absolute;
    height: 32rem;
    width: 100%;
    color: black;
    background-image: url(image/pexels-birgit-held-1046125.jpg);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.6;
}

/* 
#top_layout{
    padding:5px 0 5px 0;
    text-align: center;
    justify-content: center;

} */
ul{
    margin: auto 0px;
    padding: 0px;
    list-style: none;
    display: table;
    width: 80%;
    text-align: center;
    /* background-color: red;  */
}

.two{
    margin: auto 0px;
    padding-bottom: 40px;
    list-style: none;
    display: table;
    width: 80%;
    text-align: center;
    top: 0px;
}
li{
    display: table-cell;
    position: relative;
    padding: 5px 10px 5px 12px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.15em;
    display: inline-block;
    position: relative;
    /* background-color: blue; */
}

#lower{
    display: table-cell;
    padding: 10px 13px 40px 15px;
    /* background-color: blue; */
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.15em;
    position: relative ;
    /* padding-top: 50px; */
    position: 0;

    
   
}

a{
    padding: 5px 10px;
    color: white;
    text-decoration: none;
    top: 0px;
    /* background-color: grey; */
    margin-bottom: 20px;
}

a:hover{
    color: yellow;
    cursor: pointer;
}

a:after{
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: yellow;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0px;
}

a:hover:after{
    width: 100%;
    left: 0;
}

@media screen and (max-height:300px){
    ul{
        margin-top: 40px;
    }
}

#lower:hover{
    color: yellow;
    cursor: pointer;
}

a .lower{
    margin-left: 60px;
   
   
}

.lower:after{
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: rgb(249, 253, 6);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0px;
}

.lower:hover:after{
    width: 65%;
    left: 18%;
}

@media screen and (max-height:300px){
    .two{
        margin-top: 40px;
       
    }
}
h1{
    text-align: center;
    justify-content: center center;
    font-size: 50px;
    font-weight: 900;
    padding: 150px 5px 5px 5px;
    background:linear-gradient(to left, yellow, white);
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
}

p{
    background-color: white;
    text-align: center;
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
}

.btn{
    border: none;
    background-color: darkgoldenrod;
    color: white;
    border-radius: 25px;
    width: 110px;
    height: 30px;
    font-size: 12px;
    font-weight: 600; 
    justify-content: center center;
    margin: auto;
    outline: none;
    }

.btn:hover{
    background-color: yellow;
    color: rgb(15, 12, 12);
    cursor: pointer;
}
.lower_section{
    bottom: 0;
    z-index: 1;
    height: 100px;
    width: 100%;
    position: absolute;
    /* padding-top: 40px;
    padding-bottom: 40px; */
    
   /* justify-content: center;
   text-align: center center; */
   
}
.lower_section::before{
    content: "";
    z-index: -1;
    bottom: 0;
    height:120px;
   width: 100%;
   text-align: center;
   position: absolute;
   background-color: black;
   filter: brightness(0%);
   opacity:0.5;
   align-items: center;
    justify-content: center center;

}

/* .sub_lower{  
   margin-top: -15px;
    position: relative;
    width: 85%;
    height: 50px;
    color: yellow; 
     background-color: yellow;
    content: "";
    z-index: 1;
    text-align: center;
    justify-content: space-around;
} */

   .sub_lower a{
       display: inline-flex;
    position: relative;
     width: 20px;
     height: 20px;
    margin:2px;
    padding-right:100px;
    padding-left: 100px;
    color: white;
    background-color: grey;
    text-align: center;
    justify-content: center;
    justify-items: center center; 
} 

.contain{
   
    position: relative;
   max-width: 300px;
    /* height: fit-content; */
}
/* @media only screen and (min-device-width:400px)
{
    .box{
        max-width: 400px;
    }
} */
.box{
    display: flex;
    flex-shrink: initial;
   width: 300px;
    height: 300px;
    position: absolute;
}
.red{
    z-index: 1;
    background-color: red;

}

.blue{
   z-index: 2;   
    background-color: blue;
   top: 200px;
   left: 200px;

}

Ответ №1:

ДОБАВЛЕНО:

 @media screen and (max-width:576px){
  .contain{
    max-width: unset;
  }
  .blue{
    left: unset;
    right: 0;
  }
}

 *{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

 body{
    background-color: white;
    background-attachment: scroll;
    min-width: 100%;
} 

.head_section{
    position: relative;
    z-index: 1;
    height: 32rem;
    width: 100%;
    background-color: black;
}

.head_section::before{
    content: "";
    z-index: -1;
    position: absolute;
    height: 32rem;
    width: 100%;
    color: black;
    background-image: url(image/pexels-birgit-held-1046125.jpg);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.6;
}

/* 
#top_layout{
    padding:5px 0 5px 0;
    text-align: center;
    justify-content: center;

} */
ul{
    margin: auto 0px;
    padding: 0px;
    list-style: none;
    display: table;
    width: 80%;
    text-align: center;
    /* background-color: red;  */
}

.two{
    margin: auto 0px;
    padding-bottom: 40px;
    list-style: none;
    display: table;
    width: 80%;
    text-align: center;
    top: 0px;
}
li{
    display: table-cell;
    position: relative;
    padding: 5px 10px 5px 12px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.15em;
    display: inline-block;
    position: relative;
    /* background-color: blue; */
}

#lower{
    display: table-cell;
    padding: 10px 13px 40px 15px;
    /* background-color: blue; */
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.15em;
    position: relative ;
    /* padding-top: 50px; */
    position: 0;

    
   
}

a{
    padding: 5px 10px;
    color: white;
    text-decoration: none;
    top: 0px;
    /* background-color: grey; */
    margin-bottom: 20px;
}

a:hover{
    color: yellow;
    cursor: pointer;
}

a:after{
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: yellow;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0px;
}

a:hover:after{
    width: 100%;
    left: 0;
}

@media screen and (max-height:300px){
    ul{
        margin-top: 40px;
    }
}

#lower:hover{
    color: yellow;
    cursor: pointer;
}

a .lower{
    margin-left: 60px;
   
   
}

.lower:after{
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: rgb(249, 253, 6);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0px;
}

.lower:hover:after{
    width: 65%;
    left: 18%;
}

@media screen and (max-height:300px){
    .two{
        margin-top: 40px;
       
    }
}
h1{
    text-align: center;
    justify-content: center center;
    font-size: 50px;
    font-weight: 900;
    padding: 150px 5px 5px 5px;
    background:linear-gradient(to left, yellow, white);
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
}

p{
    background-color: white;
    text-align: center;
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
}

.btn{
    border: none;
    background-color: darkgoldenrod;
    color: white;
    border-radius: 25px;
    width: 110px;
    height: 30px;
    font-size: 12px;
    font-weight: 600; 
    justify-content: center center;
    margin: auto;
    outline: none;
    }

.btn:hover{
    background-color: yellow;
    color: rgb(15, 12, 12);
    cursor: pointer;
}
.lower_section{
    bottom: 0;
    z-index: 1;
    height: 100px;
    width: 100%;
    position: absolute;
    /* padding-top: 40px;
    padding-bottom: 40px; */
    
   /* justify-content: center;
   text-align: center center; */
   
}
.lower_section::before{
    content: "";
    z-index: -1;
    bottom: 0;
    height:120px;
   width: 100%;
   text-align: center;
   position: absolute;
   background-color: black;
   filter: brightness(0%);
   opacity:0.5;
   align-items: center;
    justify-content: center center;

}

/* .sub_lower{  
   margin-top: -15px;
    position: relative;
    width: 85%;
    height: 50px;
    color: yellow; 
     background-color: yellow;
    content: "";
    z-index: 1;
    text-align: center;
    justify-content: space-around;
} */

   .sub_lower a{
       display: inline-flex;
    position: relative;
     width: 20px;
     height: 20px;
    margin:2px;
    padding-right:100px;
    padding-left: 100px;
    color: white;
    background-color: grey;
    text-align: center;
    justify-content: center;
    justify-items: center center; 
} 

.contain{
   
    position: relative;
   max-width: 300px;
    /* height: fit-content; */
}
/* @media only screen and (min-device-width:400px)
{
    .box{
        max-width: 400px;
    }
} */
.box{
    display: flex;
    flex-shrink: initial;
   width: 300px;
    height: 300px;
    position: absolute;
}
.red{
    z-index: 1;
    background-color: red;

}

.blue{
   z-index: 2;   
    background-color: blue;
   top: 200px;
   left: 200px;
}


@media screen and (max-width:576px){
  .contain{
    max-width: unset;
  }
  .blue{
    left: unset;
    right: 0;
  }
}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acadera Renewed</title>
    <link rel="stylesheet" href="Acadera Imp.css">
</head>
<body>
    <div class="head_section">
        <div id="top_layout">
           <center>
           <ul>
            <li><a>Home</a></li>
            <li><a>Pages</a></li>
            <li> <a>Services</a></li>
            <li><a>Gallary</a></li>
            <li><a>Blog</a></li>
            <li><a>Contact</a></li>
            <li><a>About</a></li>
       
            <li><input type="text" placeholder="Search"></input></li>
        </ul>
    </center>
        </div>

        <h1>WELCOME TO ACADERA</h1>
        <p>We bring you the best there is to offer</p>
       <center><input type="button" class= "btn" value="GET STARTED" ></input></center>
        <div class="lower_section">
           <center>
           <ul class="two">
            <li id="lower"><a href="" class="lower">Akan</a></li>
            <li id="lower"><a href="" class="lower">Uwem</a></li>
            <li id="lower"><a href="" class="lower">Itoro</a></li>
        </ul>
        </center>
        </div>
    </div>
    
   <div class="contain">
       <div class="box red"> </div>
       <div class="box blue"></div>
    </div>
</body>
</html>

Развернуть фрагмент

Метки: Проблема с созданием адаптивных перекрывающихся Divs

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

почему функция preventDefault() не работает в пертикулярном случае?

Как использовать case_when() для исключительных нескольких условий

Лучшая практика реагирования на функции onWheel/onScroll?