Question

基本上，我试图制作一个涉及页面3个部分的页面 - 一个旁边的元素，一个div元素（用于动画但不相关）和一个页脚。我想要它是如何布局的是页面左上角的旁边元素，以及下面的黑色div元素，而页脚通常位于div元素下面。到目前为止我所拥有的div元素几乎是旁边元素的背景，以及它下方的页脚。

当我尝试<!DOCTYPE html> <html> <head> <title>A thing</title> <link rel="stylesheet" type="text/css" href="finalmobile.css"> <link rel="stylesheet" media="only screen and ( min-width: 30em )" href="finaltablet.css"> <link rel="stylesheet" media="only screen and ( min-width: 48em )" href="final.css"> <script type="text/javascript" src="project.js"></script> </head> <body> <aside class="aside1"> <h1>TEXT</h1> </aside> <div class="coupon"> </div> <br><br><br><br><br><br> <footer> <p style="font-size: small; text-align: center">© Blah Blah Blah, 2017</p> </footer> </body> </html>时，div元素将被定位正确，但它将重叠在页脚的顶部。

我如何让它采取不同的行动？谢谢！

aside.aside1                {
                                    height: 20%;
                                    width: 40%;
                                    margin: 2%;
                                    padding: 1%;
                                    background-color: teal;
                                    border: 1px solid black;
                                    float: left;
                                    border-radius: 5px;
            }
    div.coupon      {
                                    height: 20%;
                                    width: 50%;
                                    background-color: black;
                                    position: static;
                                    top: 40%;

            }

CSS：

{{1}}

Answer 1

您可以删除/避免position: absolute DIV中的.coupon（在文档流中创建/保留常规元素，从而按下页脚等后续元素）并添加{{1} }到position: absolute，从而将它放在身体左上角的DIV上方（如果向下滚动，它将与身体一起滚动）。

＆＃13;

aside

＆＃13;

html,
body {
  margin: 0;
  height: 100%;
}

aside.aside1 {
  height: 20%;
  width: 40%;
  margin: 2%;
  padding: 1%;
  background-color: teal;
  border: 1px solid black;
  position: absolute;
  border-radius: 5px;
}

div.coupon {
  width: 50%;
  background-color: black;
  position: static;
  top: 40%;
  color: white;
  padding: 150px 5px 5px 5px;
}

＆＃13;

将<aside>元素作为页面的特定部分？

1 个答案: