涉及媒体查询的绝对和相对定位？答案

【问题标题】：Absolute and relative positioning involving media queries?涉及媒体查询的绝对和相对定位？
【发布时间】：2016-02-26 10:33:44
【问题描述】：

所以我正在尝试为实验室重新创建以下布局：http://i.imgur.com/T24vvGu.jpg

我从处理导航栏开始。我将位置设置为绝对，所以我可以给它一个顶部：50px；属性将其从顶部向下移动 50px。

然后我尝试将徽标的位置设置为相对，以便相对于导航栏，我可以将其从左侧移动 20px 左右。但是当我使用相对定位时，徽标位于导航栏内部，使导航栏的高度更大。

我认为通过将徽标的位置设置为相对位置，它会将徽标视为不是导航栏的一部分。然而，事实并非如此。所以我所做的就是将徽标的位置设置为绝对位置。这整件事简直是在扼杀我的灵魂。出于某种原因，我无法理解如何做到这一点。

我去了网络档案馆，并查找了 spigot design 的网站。他们所做的是将导航栏的位置设置为固定，并将徽标设置为相对。我也尝试过这样做，但徽标仍会位于导航栏内并扩展其高度。

此外，当浏览器为 768 像素及以下时，我必须将徽标设置为位于导航栏的中间。然后，两个菜单链接位于徽标的左侧，另外两个菜单链接位于徽标的右侧。我完全不知道如何做到这一点。我认为其余的布局不会有问题。只是这个导航栏和标志定位让我发疯。

这是我的代码：http://cryptb.in/v48Y#cf572c29a798b3c6593631d831c8a323

我是否也应该上传带有徽标图片的代码？这可能更容易理解。我不确定最佳做法是什么，因为我是堆栈溢出的新手。

HTML：

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Lab Eight</title>
  <link href="css/styles.css" rel="stylesheet">
</head>

<body>
  <!-- navigation bar left -->
  <div class="navbar">
    <div id="logo"></div>
    <div class="container">
      <ul class="float-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Media</a></li>
      </ul>
    </div>
  </div>

  <div class="container">

    <div class="row">

      <div class="column-twelve">

      </div>

      <div class="column-twelve">

      </div>

    </div>

  </div>

</body>

</html>

CSS：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
  background: #f3f3f3;
  font-family: 'Open Sans', sans-serif;
  margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.1;
}
/* Horizontal line to divide content */
hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border: 0;
  border-top: 1px solid #332929;
}
#logo {
  background: url('images/logo-left.png');
  display: block;
  width: 250px;
  height: 100px;
  position: absolute;
  left: 15px;
  top: -20px;
}
.column-twelve h1, h2, h3, h4, h5, h6 {
  color: #f2f2f2;
}
.column-twelve h2 {
  font-size: 1.875em;
}
.row .column-twelve p {
  color: #f2f2f2;
  font-weight: 400;
  font-size: 0.875em;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
/* Acts as a container to wrap all the content so it doesn't take up 100% of the page. */
.container {
  width: 90%;
  padding-right: 10px;
  padding-left: 10px;
  margin-right: auto;
  margin-left: auto;
}
.navbar {
  position: absolute;
  width: 100%;
  min-height: 58px;
  top: 50px;
  background: #fefefe;
}
.navbar li {
  position: relative;
  display: inline;
  list-style: none;
}
.navbar li a {
  color: #333333;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  padding: 10px 10px;
  text-transform: uppercase;
}
/* The row for the columns. */
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.column-twelve {
  width: 100%;
}
.column-eleven {
  width: 91.66666667%;
}
.column-ten {
  width: 83.33333333%;
}
.column-nine {
  width: 75%;
}
.column-eight {
  width: 66.66666667%;
}
.column-seven {
  width: 58.33333333%;
}
.column-six {
  width: 50%;
}
.column-five {
  width: 41.66666667%;
}
.column-four {
  width: 33.33333333%;
}
.column-three {
  width: 25%;
}
.column-two {
  width: 16.66666667%;
}
.column-one {
  width: 8.33333333%;
}
@media screen and (max-width: 768px) {
  #logo {
    position: absolute;
    margin: 0 auto;
    background: url('images/logo-center.png');
    height: 146px;
    width: 250px;
  }
}

【问题讨论】：

你应该添加你的代码。
好的，我在评论中添加了我的代码。
添加你的代码 js fiddle
jsfiddle.net/g8h58ye3

标签： html css responsive-design position

【解决方案1】：

给你：http://codepen.io/n3ptun3/pen/avrXaE?editors=110

为了完成这个，我将#navbar 相对于它的正常位置定位。然后我绝对定位了#logo 和#container（从它们的第一个定位的祖先元素，即#navbar。）

高度问题来自于在.navbar 上设置min-height: 58px;。相反，您想使用height: 58px;。

仅供参考 - 使用媒体查询时，最好先编写代码移动设备。这意味着首先为最小的屏幕编写代码。为此，您必须使用min-width 而不是max-width。此外，您想使用@media only screen，而不是@media screen。这仅针对可以理解媒体查询的浏览器。

希望这会有所帮助。如有任何关于 cmets 部分代码的问题，请随时提出。

HTML

<div id="page">
  <div id="navbar">
    <div id="logo"></div>
    <ul id="container">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Media</a></li>
    </ul>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

body {
  background: #f3f3f3;
  font-family: 'Open Sans', sans-serif;
  margin: 0 auto;
}

#page {
  height: 600px;
}

#navbar {
  position: relative;
  width: 100%;
  height: 50px;
  top: 75px;
  background-color: #fefefe;
}

#logo {
  width: 150px;
  height: 150px;
  border-radius: 75px;
  background-color: #333;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-50%);
}

#container {
  position: absolute;
  top: 13px;
  padding: 0;
  margin: 0;
  width: 100%;
}

#navbar li {
  display: none;
}

#navbar li a {
  color: #333333;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  text-transform: uppercase;
}

#navbar li:nth-child(3) a, 
#navbar li:nth-child(4) a {
  position: relative;
  left: 100%;
}

@media only screen and (min-width: 569px) {
  #navbar li {
    display: inline-block;
    list-style: none;
    width: 20%;
    float: left;
    text-align: center;
  }
}

@media only screen and (min-width: 769px) {
  #logo {
    left: 50px;
    transform: translate(0);
  }

  #container {
    width: 30%;
    right: 50px;
  }

  #navbar li {
    width: 25%;
  }

  #navbar li:nth-child(3) a, 
  #navbar li:nth-child(4) a {
    left: 0;
  }
}

编辑：针对您的其他问题：

:nth-child() 是一个伪类选择器。它选择作为其父级所需序数的子级（即第 1、第 2、第 3、第 4、第 5 等）。序数由括号中的数字指定。因此，如果您查看我的代码，您会看到li:nth-child(3)。这意味着：选择所有 li 元素，它们是其父元素的 第三个子元素。如果第三个子元素不是li 元素，它将NOT被选中。
关于您的媒体查询问题：我将 left: 50%; transform: translate(-50%); 代码放在媒体查询之外的原因是因为我使用的是 mobile first 方法的编码。 移动优先设计是响应式设计的当前标准。这意味着您首先要针对最小的屏幕（移动设备）进行设计。因此，我将徽标居中，并在媒体查询之外删除文本链接。然后我在我的第一个媒体查询中定位平板电脑：@media only screen and (min-width: 569px)。这针对分辨率为 569 像素或更高的屏幕，并在导航栏中添加文本链接。最后，我使用另一个媒体查询：@media only screen and (min-width: 769px) 来定位更大的屏幕（计算机），屏幕尺寸为 769 像素或更高。在这个媒体查询中，我将徽标放在左侧，将文本链接放在右侧。

注意：在您的代码中，您使用的是桌面优先设计。您首先为大屏幕设计。然后，您使用较小尺寸的媒体查询。这就是您的媒体查询使用max-width 的原因。我正在使用移动优先设计。我首先是为小屏幕设计的。然后我使用更大尺寸的媒体查询。这就是为什么我的媒体查询使用min-width。

希望这会有所帮助！

【讨论】：

非常感谢！我还没有知道“nth-child”是做什么的，但那是我自己可以查到的。当然，除非你觉得你有一个很好的解释。我注意到的一件事是，您将徽标的 left 属性设置为媒体查询之外的 50%。这是如何运作的？因为我的看法是，一旦分辨率下降，您希望徽标向左移动 50%（中间）。再次感谢您。你的代码看起来很干净。这是我正在努力做的事情，因为我正在学习。我觉得我经常把如何做某事过于复杂。
请在我的回答中查看编辑。另外，如果您觉得我的回答有用，请点赞。谢谢！至于你的代码——你会在继续学习的过程中找到简化和清理代码的方法。任何其他问题，请告诉我。