如何避免html元素相互重叠_Html_Css_Responsive Design_Position_Display

如何避免html元素相互重叠

html css responsive-design

如何避免html元素相互重叠,html,css,responsive-design,position,display,Html,Css,Responsive Design,Position,Display,我是CSS和web开发的新手，尝试建立自己的第一个网站。我读过一些关于显示和定位元素的文章，但是在调整浏览器窗口的大小时，我仍然无法完美地定位元素我试图完成的是下面第一条评论中的代码笔链接 HTML代码 <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-8&qu

我是CSS和web开发的新手，尝试建立自己的第一个网站。我读过一些关于显示和定位元素的文章，但是在调整浏览器窗口的大小时，我仍然无法完美地定位元素

我试图完成的是下面第一条评论中的代码笔链接

HTML代码

 <head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  
  <meta charset="UTF-8">
</head>


<body class="mainBody">
  <header class="mainHeader">

    <div class="headerStuff">

      <div class="social-list">

        <div class="fb">
          FB
        </div>

        <div class="twitter">
          Twitter
        </div>

        <div class="instagram">
          Instagram
        </div>

      </div>

      <ul class="navigation">
        
        <li> <a href=""> <b>My Projects</b> </a> </li>
        <li> <a href=""> <b>Gallery</b> </a> </li>

        <li> <a href=""> <b> About </b> </a> </li>

        <li> <a href=""> <b>Contact</b> </a> </li>

      </ul>

      <div class="logoDiv">
        <h2>Logo</h2>
      </div>
    </div>

    <div class="HeaderLine"></div> <!-- Header Separator Line -->

  </header>

</body>

请查看上面链接中的“我的代码”，并尝试将浏览器窗口调整为最小大小

我面临的问题是什么？ 当然，你已经注意到，在调整浏览器窗口大小后，导航元素是如何跳过社交媒体开发的

那么，如何才能避免头目塔夫部门的这种丑恶行为呢

另外，如果我的描述或提到的标签中有错误，请帮助我改进我的问题

这是您更新的CSS：

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
  }
.mainBody {
   background-color: gray;
   background-size: cover;
   background-repeat: no-repeat;
   color: white;
   /* margin: 0px 0px 0px 20px; */
 }
.headerStuff {
   height: 80px;
   display: flex;
   position: relative;
   vertical-align: baseline;
   width: 100%;
   justify-content: space-between;
   align-items: center;
 }
.social-list {
   display: inline-flex;
 }
.social-list div {
   margin-left: 12px;
 }
.navigation {
   margin: 0;
 }
.navigation li {
   background-color: #22385b;
   display: inline-block;
   padding: 7px 5px 7px 5px;
   border-radius: 7px;
   font-size: 20px;
   width: 90px;
   color: white;
 }
.navigation li:hover {
   background-color: #446291;
 }
.navigation li a {
   color: white;
   font-size: 14px;
   font-family: 'Chakra Petch', sans-serif;
   text-align: center;
   text-decoration: none;
   display: block;
 }
ul li .prayer-window {
   background-color: rgba(237, 239, 242, 0.9);
   margin-top: 20px;
   width: 400px;
   height: 400px;
   position: relative;
   z-index: 1;
   opacity: 0;
   box-shadow: 0px 0px 100px black;
   transition: 1s opacity, 5s width, 5s height;
 }
.prayer-time:hover {
   color: hotpink;
 }
.prayer-time:active ~ .prayer-window {
   opacity: 1;
 }
.logoDiv h2 {
   margin: 0;
}
.logoDiv img {
   width: 150px;
 }
.HeaderLine {
   box-sizing: border-box;
   height: 2px;
   margin: 0 auto;
   text-align: center;
   background-color: pink;
   box-shadow: 2px 2px 4px black, 0 0 30px red, 0 0 5px darkblue;
 }

您可以通过媒体查询调整特定屏幕大小的css属性

@media only screen and (max-width: 796px) {
   //
}

PS.

align items:bottom

实际上不是一件事。可能您的意思是对齐项目：基线

以下是您更新的CSS：

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
  }
.mainBody {
   background-color: gray;
   background-size: cover;
   background-repeat: no-repeat;
   color: white;
   /* margin: 0px 0px 0px 20px; */
 }
.headerStuff {
   height: 80px;
   display: flex;
   position: relative;
   vertical-align: baseline;
   width: 100%;
   justify-content: space-between;
   align-items: center;
 }
.social-list {
   display: inline-flex;
 }
.social-list div {
   margin-left: 12px;
 }
.navigation {
   margin: 0;
 }
.navigation li {
   background-color: #22385b;
   display: inline-block;
   padding: 7px 5px 7px 5px;
   border-radius: 7px;
   font-size: 20px;
   width: 90px;
   color: white;
 }
.navigation li:hover {
   background-color: #446291;
 }
.navigation li a {
   color: white;
   font-size: 14px;
   font-family: 'Chakra Petch', sans-serif;
   text-align: center;
   text-decoration: none;
   display: block;
 }
ul li .prayer-window {
   background-color: rgba(237, 239, 242, 0.9);
   margin-top: 20px;
   width: 400px;
   height: 400px;
   position: relative;
   z-index: 1;
   opacity: 0;
   box-shadow: 0px 0px 100px black;
   transition: 1s opacity, 5s width, 5s height;
 }
.prayer-time:hover {
   color: hotpink;
 }
.prayer-time:active ~ .prayer-window {
   opacity: 1;
 }
.logoDiv h2 {
   margin: 0;
}
.logoDiv img {
   width: 150px;
 }
.HeaderLine {
   box-sizing: border-box;
   height: 2px;
   margin: 0 auto;
   text-align: center;
   background-color: pink;
   box-shadow: 2px 2px 4px black, 0 0 30px red, 0 0 5px darkblue;
 }

您可以通过媒体查询调整特定屏幕大小的css属性

@media only screen and (max-width: 796px) {
   //
}

PS.

align items:bottom

实际上不是一件事。可能您的意思是对齐项目：基线

您的

。导航

。sosial列表

定位为

绝对

。这意味着它们与其他元素的顺序不符，不会占用其他内容的空间

作为绝对定位元素

。导航

始终相对于下一个非静态定位的父元素。在您的项目中，它是

.header stuff

。同时，

页边距顶部

将其从页眉的顶部边缘向下移动

因此，如果屏幕变窄，您的

。标题内容

也会变窄。您的导航保持不变：

175px

从

的右边缘开始。页眉填充物

和

30px

从顶部开始的边距。。。这使得它比你的社交活动更具层次性

如果您想保持您的结构，请放大

导航的页边距顶部
，这样导航仍有足够的位置移动到社交信息下方
但是如果你愿意改变你的结构，你不需要绝对的定位。使用具有块元素的结构，以便社交和导航仍然位于下方，而不是彼此重叠
仅通过简单的演示代码结构示例来解释此想法：

// css structure DEMO


nav { 
   display: block; 
}

ul {
   /* align ul to right */
   margin-right: 0;
   margin-left: auto;
}

li {
   /* align li's into a line */
   display: inline-block;
}

header hr {
   ... style your subheader line ...
}


// html structure DEMO
<header>

   <div class="top-header>
      ... your socials ...
   </div>

   <nav>

      <ul>

         <li></li>
         ...

      </ul>
      
   </nav>

   <hr>

</header>



//css结构演示
导航{
显示：块；
}
保险商实验室{
/*右对齐*/
右边距：0；
左边距：自动；
}
李{
/*把李排成一行*/
显示：内联块；
}
收割台人力资源{
…设计你的副标题行。。。
}
//html结构演示
您的.navigation
.sosial列表
已定位为绝对
。这意味着它们与其他元素的顺序不符，不会占用其他内容的空间
作为绝对定位元素。导航
始终相对于下一个非静态定位的父元素。在您的项目中，它是.header stuff
。同时，页边距顶部
将其从页眉的顶部边缘向下移动
因此，如果屏幕变窄，您的。标题内容
也会变窄。您的导航保持不变：175px
从的右边缘开始。页眉填充物
和30px
从顶部开始的边距。。。这使得它比你的社交活动更具层次性
如果您想保持您的结构，请放大导航的页边距顶部
，这样导航仍有足够的位置移动到社交信息下方
但是如果你愿意改变你的结构，你不需要绝对的定位。使用具有块元素的结构，以便社交和导航仍然位于下方，而不是彼此重叠
仅通过简单的演示代码结构示例来解释此想法：

// css structure DEMO


nav { 
   display: block; 
}

ul {
   /* align ul to right */
   margin-right: 0;
   margin-left: auto;
}

li {
   /* align li's into a line */
   display: inline-block;
}

header hr {
   ... style your subheader line ...
}


// html structure DEMO
<header>

   <div class="top-header>
      ... your socials ...
   </div>

   <nav>

      <ul>

         <li></li>
         ...

      </ul>
      
   </nav>

   <hr>

</header>



//css结构演示
导航{
显示：块；
}
保险商实验室{
/*右对齐*/
右边距：0；
左边距：自动；
}
李{
/*把李排成一行*/
显示：内联块；
}
收割台人力资源{
…设计你的副标题行。。。
}
//html结构演示
使用引导：您可以轻松地使网站响应，这可以解决您的问题easily@Satish莫达，我现在做的是一个简单的页面。。。使用bootstrap将使我从一开始就重新构建我的页面，此外，我还将阅读大量文档，了解它的工作原理，并记住类名，这对我来说是在浪费时间！使用引导：您可以轻松地使网站响应，这可以解决您的问题easily@Satish莫达，我现在做的是一个简单的页面。。。使用bootstrap将使我从一开始就重新构建我的页面，此外，我还将阅读大量文档，了解它的工作原理，并记住类名，这对我来说是在浪费时间！非常感谢你的解释，现在我明白我的错在哪里了。你的笔记帮我解决了这个问题。非常感谢你的解释。现在我明白我的错在哪里了。你的笔记帮助我解决了这个问题=）