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

Code2016 发表于 Dev

代码2016

我做了一个简单的网站，但div却无法正常显示

我有一个divsection-one是position: relative [绿色]和我称为第二个divsilver-break-bar的div是position: absolute内部的。

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

将section-two被显示在绿色股利。为什么绿色div下方没有显示？我什至body {height: auto}

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

更新：最后，我试图创建在彼此下面显示的div，即与此类似的第一节，第二节，第三节。

更新：这是代码，对不起，我忘了添加它！

的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%;
}

米海

出色地。我不知道从哪里开始:)这里有很多问题

做了一个jsfiddle

如果您希望各节接连进行而不互相position:absolute重叠，请不要使用！
您写在某处margin-top:0 auto，那是不正确的，margin-top只有一个值，margin:0 auto是正确的，并且意味着margin-top:0,margin-right:auto,margin-bottom:0,margin-left:auto
.section-two（红线），如果您希望它位于导航之后，为什么不将其放在html的导航栏后面？如果您不想使用它，那么可以。...在该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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-04-28

我来说两句

0 条评论

登录后参与评论

上一篇：如何在iOS中为tableview添加行

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

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

构建类似于Jarvis的本地语言应用程序

在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

SQL Server中的非确定性数据类型

使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

Swift 2.1-对单个单元格使用UITableView

Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

HttpClient中的角度变化检测

如何了解DFT结果

错误：找不到存根。请确保已调用spring-cloud-contract：convert

Embers js中的更改侦听器上的组合框

在Wagtail管理员中，如何禁用图像和文档的摘要项？

如何避免每次重新编译所有文件？

Java中的循环开关案例

ng升级性能注意事项

Swift中的指针替代品？

如何使用geoChoroplethChart和dc.js在Mapchart的路径上添加标签或自定义值？

使用分隔符将成对相邻的数组元素相互连接

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

ggplot：对齐多个分面图-所有大小不同的分面

完全禁用暂停（在内核级别？-必须与使用的DE和登录状态无关！）