如何避免 html 个元素相互跳过

Question

我是 CSS 和网络开发的新手，正在尝试建立我自己的第一个网站。我已经阅读了一些与显示和定位元素相关的文章，但是我仍然无法在调整浏览器大小时完美定位元素 window!.

我想要完成的是在代码笔 link 下面的第一条评论中 https://codepen.io/letsimoo/pen/XWNGoGa

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;
  /*width: 100%;*/
}

.mainHeader {
  height: 80px;
}

.headerStuff {
  height: auto;
  display: flex;
  position: relative;
  align-items: bottom;
  vertical-align: baseline;
  width: 100%;
}

.social-list {
  display: inline-flex;
  position: absolute;
  margin-top: 20px;
  left: -10px;
}

.social-list div {
  margin-left: 12px;
}

.navigation {
  position: absolute;
  right: 175px;
  text-align: right;
  height: 30px;
  padding: 0px;
  margin: 0px;
  margin-top: 30px;
  display: flex;
}

.navigation li {
  background-color: #22385b;
  display: inline-block;
  margin-left: 5px;
  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 {
  position: absolute;
  right: 0px;
}

.logoDiv img {
  width: 150px;
}

.HeaderLine {
  box-sizing: border-box;
  height: 2px;
  margin-top: 68px;
  margin-right: 175px;
  text-align: center;
  background-color: pink;
  box-shadow: 2px 2px 4px black, 0 0 30px red, 0 0 5px darkblue;
}

请查看我上面的代码 link 并尝试将浏览器 window 调整到最小尺寸

我遇到了什么问题？ 您肯定已经注意到在调整浏览器大小后导航元素如何跳过社交媒体开发人员 window

那么如何避免 headerStuff 的这种丑陋行为 div!??

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

Answer 1

这是你的更新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 不是真的东西。可能你的意思是 align-items:baseline

Answer 2

你的.navigation.sosial-list的位置是absolute。这意味着它们与其他元素的顺序不一致，并且不会 space 被其他内容占用。

作为绝对定位元素 .navigation 总是相对于下一个非静态定位的父元素。在您的项目中它是 .header-stuff。同时 margin-top 将其从 header-stuff 的顶部边缘向下移动 ...

因此，如果屏幕变窄，您的 .header-stuff 也会变窄。并且您的导航保持不变：.header stuff 的右边缘 175px 和顶部的 30px 边缘...使其在您的社交之上分层。

如果您想保留您的结构，请将 margin-top 放大为 .navigation，以便导航仍然有足够的空间移动到社交信息下方。

但是，如果您愿意改变结构，则不需要绝对定位。使用具有块元素的结构，以便社交和导航仍在下方并且不会相互叠加。

简单的DEMO代码结构示例讲解思路：


// 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>

如何避免 html 个元素相互跳过

How to avoid jumping html elements over each others

html

css

position

responsive-design

display