网页无响应：如何使用绝对位置和相对位置？答案

【问题标题】：Web page not responsive: how to use position absolute and relative?网页无响应：如何使用绝对位置和相对位置？
【发布时间】：2016-07-18 18:03:17
【问题描述】：

我做了一个简单的网站，但是 div 没有正确显示

我有一个 div section-one 即 position: relative [green] 我还有一个名为 silver-break-bar 的 div 内部是 position: absolute。

我在section-one 下方还有一个section-two div [红色]。 问题是三方面的。

section-two 显示在绿色 div 上方。为什么不显示在绿色 div 下方？我什至做了body {height: auto}

第二个问题是我已经创建了我的red-car img padding:0 margin:0，所以我没有超出页面，但是 div 仍然没有环绕图像？
第三个问题是当我调整浏览器大小时，粉红色的 div 覆盖了标题？这是为什么呢？

更新：最后，我正在尝试创建显示在彼此下方的 div，即与此类似的第 1 节、第 2 节、第 3 节。

更新：这是代码，抱歉我忘记添加了！

HTML

    <!DOCTYPE html>
<html>
<head>
    <title>Responsive Navigation Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
    <script src="js/jquery-3.0.0.min.js"></script>
    <script>
        $(function() {
            var pull        = $('#pull');
                menu        = $('nav ul');
                menuHeight  = menu.height();

            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
    </script>
</head>

<body>
<div id='main-header'>
    <nav class="clearfix">
        <ul class="clearfix">
            <li><a href="#">Home</a></li>
            <li><a href="#">How ItS</a></li>
            <li><a href="#">Why Us</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <a href="#" id="pull">Menu</a>
    </nav>
</div>

    <div id='section-one'>
            <h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1>
                <div class='silver-line-break'></div>
                <div id='fee-estimate-box'>
                    <form id='fee-estimate-form' action="#">
                            <legend>Delivery Fee Calculator</legend>
                            <span>First name: </span> <input type="text" name="firstname" value="Mickey">
                            <span>Last name: </span> <input type="text" name="lastname" value="Mouse">
                            <input type="submit" value="Submit">
                    </form>
                </div>                  <div class='silver-break-bar'>
                    <img id='red-car' src="img/red-car.png" alt="" height="60%" width="30%;">
                </div>
    </div>

    <div id='section-two'>
        <p>section two div</p>
    </div>
</body>
</html>

CSS

/* Basic Styles */
* {
   margin-top:  0px;
   padding: 0;
}
body {
    margin: 0;
  height: auto;
    background-color: #ece8e5;
}

/***** NAVIGATION ***/
/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

nav {
    height: 40px;
    width: 100%;
    background: white;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 1px solid #283744;

}
nav ul {
    padding-right: :5px;
    margin: 0 auto;
    width: 500px;
    height: 40px;
  float: right;
  margin-right: 0%;
}
nav li {
    display: inline;
    float: left;
}
nav a {
    color: black;
    display: inline-block;
    width: 85px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    /*text-shadow: 1px 1px 0px #283744;*/
}
nav li a {
    /*border-right: 1px solid #576979;*/
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #8c99a4;
}
nav a#pull {
    display: none;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
    nav {
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
      float: none;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: white;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('../img/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

/*Smartphone*/
@media only screen and (max-width : 320px) {

  nav ul {
    float: none;
  }

    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}

#section-one {
    position: absolute;;
    background-color:  #80be05;
    margin-top: 0 auto;
    padding: 0;
  height: 85%;

}

#section-one h1 {
  position: relative;
    margin: 0px;
    padding: 2%;
    font-family: 'TeX Gyre Adventor', 'sans-serif';
    font-size: 57px;
    text-align: center;
    color: white;
    text-shadow: 0px 1px;
}

#section-one .silver-line-break {
    position: absolute;
    width: 100%;
    height: 10%;
    top: 100%;
    background-color: silver;
    margin: 0 auto;
}

#section-two {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: red;
}
#section-one #red-car {
  position: absolute;
  display: inline-block;
  left: 75%;
  top: 60%;
  background-color: blue;
  padding: 0;
  margin: 0 auto;
}

#section-one #fee-estimate-box {
  background-color: pink;
  position: absolute;;
  width: 70%;
  height: 40%;
  top: 50%;
  left: 2%;
}

【问题讨论】：

请分享您的css和html（仅相关部分）
您尚未提供minimal reproducible example，但您所有三个问题的答案似乎都是“因为您使用了绝对定位”。它不是创建您在上一张图片中提供的布局的合适工具。
鉴于您遇到的问题，您应该检查引导程序。用它构建响应式页面非常容易。
对不起！我不小心按下了发布按钮。源代码已添加！
Bootstrap 可能值得用来了解响应式的工作原理，然后根据您从中学到的知识构建自己的 CSS

标签： html css css-position

【解决方案1】：

好吧。我不知道从哪里开始 :) 这里有很多问题

发了一个jsfiddle

如果您希望各个部分一个接一个地进行而不是相互重叠，请不要使用position:absoluteEVER！
你在某处写了margin-top:0 auto，这是不正确的，margin-top 只有一个值，margin:0 auto 是正确的，表示margin-top:0,margin-right:auto,margin-bottom:0,margin-left:auto
.section-two（红线），如果你想让它在导航之后，为什么不把它放在 html 中的 nav 之后呢？如果你不想使用它，那么是的....在那个 div 上使用 position:absolute 。但我建议你让你的 html 更容易使用

让我知道它是否有效

代码：

#section-one {
    background-color:  #80be05;
    padding: 0;
    height: 100%;
    float:left;
    width:100%
   }

#section-one h1 {
    margin: 0px;
    padding: 2%;
    font-family: 'TeX Gyre Adventor', 'sans-serif';
    font-size: 57px;
    text-align: center;
    color: white;
    text-shadow: 0px 1px;
}

#section-one .silver-line-break {
    position: relative;
    width: 100%;
    height: 10px;
    float:left;
    background-color: silver;
    margin: 10px auto;
}

#section-two {
  position: relative;
  width: 100%;
  height: auto;
  float:left;
  background-color: red;
  padding:10px 0 5px;
}
#section-one #red-car {
  position: relative;
  float:right;
  background-color: blue;
  width:25%;
  height:100px;
}

#section-one #fee-estimate-box {
  background-color: pink;
  position: relative;;
  width: 70%;
  height: auto;
  float:left;
  margin-left:2.5%;
  margin-right:2.5%;


}

在此处阅读有关 CSS 位置的更多信息：CSS POSITION

【讨论】：

嘿！所以这就是我得到的。所以红色 div 工作正常。我希望它低于绿色，这样很好。但是表格和 img 在绿色 div 后面我认为这里是链接imgur.com/8F5QK3h
银断条也消失了
所以你想让红色在绿色之后而不是在导航之后？粉色和蓝色要在绿色区域内？
谢谢！那么蓝色和粉色落后的具体原因是什么？
您还说过：“如果您希望部分一个接一个地进行而不是相互重叠，请不要使用 position:absolute EVER ！” -- 这是否意味着我应该使用 position:relative？

【解决方案2】：

当涉及到您网站的移动视图时，最好不要在您的主要 div（如页眉或页脚）中使用位置 absolute，因为它相对于其父级定位它们。如果你真的想用absolute定位一些div，你应该记得将它的父div设置为position: relative，这样你就可以将它定位在父div的“内部”并且它不会超出它，除非你给它负数left、right 等。但请记住，使用position: relative 要好得多，你所有的 div 将相对于彼此定位，并且你不太可能遇到问题。希望对您有所帮助。

【讨论】：