Question

我在网站上定位元素时遇到了麻烦。我的网站包含一个带有class="main"的大型div和一个页脚。我想让我的主要课程的保证金率达到80％。不管我把这个div放在上面，我希望它留在那个位置。为此，我将其设为position: absolute和top: 80%。问题是通过这样做我的div忽略文档流程，我的页脚移动到页面顶部。我可以通过给它position: absolute和top:#来解决这个问题，但我对其他页面使用相同的样式表，然后我必须为每个站点设置一个顶部。有没有办法让我的页脚忽略主要的position:absolute并保持在主要之后？

注意：抱歉我的英语不好。

CODE：

HTML

<div class="main">
  <div class="content">
  <h4> Welcome!</h4>
  </div>
</div>

<div id="FooterRotate"></div>
<footer>
     <div class="social"></div>
</footer>

CSS

body{ 
    background-color:#3CC;
    overflow-x: hidden;
    padding-bottom: 20px;
    border: 1px solid transparent;
/*    position: absolute;*/
}
/*Main*/
.main{
    -ms-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    background-image: url(../Media/backgrouds/Fondo.jpg);
    width: 120%;
/*    height: 1000px;*/
    top: 90%;
    margin-left: -20px;
    position: absolute;
    z-index: -1;   
}


.content{
    transform: rotate(2deg);
    padding-top: 50px;
    width: 83.3%;
    margin-left: 24px;
}

#FooterRotate{
    transform: rotate(2deg);
    top: 1500px;
    left: -10px;
    height: 100px;
    width:  120%;
    background-color: #C70039;
    position: absolute;
/*    clear: both;*/
}

footer{
    height: 220px;
    background-color: #C70039;
    top: 1550px;
    left: -10px;
    padding-top: 20px;
    width: 110%;
    overflow: hidden;
    position: absolute;

}

Answer 1

如果您将页脚作为.main div的子元素，那么您的页脚将跟随main中的内容。所以你可以避免使用position：absolute to footer。

HTML中的变化：移动#FooterRotate，页脚在.main div。

CSS中的更改：删除了页脚绝对及其相应属性（顶部，左侧）的页脚和#FooterRotate。

body{ 
    background-color:#3CC;
    overflow-x: hidden;
    padding-bottom: 20px;
    border: 1px solid transparent;
/*    position: absolute;*/
}
/*Main*/
.main{
    -ms-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    background-image: url(../Media/backgrouds/Fondo.jpg);
    width: 120%;
/*    height: 1000px;*/
    top: 90%;
    margin-left: -20px;
    position: absolute;
    z-index: -1;   
}


.content{
    transform: rotate(2deg);
    padding-top: 50px;
    width: 83.3%;
    margin-left: 24px;
}

#FooterRotate{
    transform: rotate(2deg);
   /* top: 1500px;
    left: -10px; */
    height: 100px;
    width:  120%;
    background-color: #C70039;
    /*position: absolute;*/
/*    clear: both;*/
}

footer{
    height: 220px;
    background-color: #C70039;
    /*top: 1550px;
    left: -10px;*/
    padding-top: 20px;
    width: 110%;
    overflow: hidden;
   /* position: absolute;*/

}

<div class="main">
  <div class="content">
  <h4> Welcome!</h4>
  </div>
  <div id="FooterRotate"></div>
  <footer>
       <div class="social"></div>
  </footer>
</div>

Answer 2

在html静态元素中彼此相继并且与fixed或absolute位置元素无关。如果您希望主div与顶部具有特定距离（例如100px），则将其设置为绝对位置并不是一个好主意。管理以前的元素会更好：

<div style="height: 100px; overflow: hidden;">
   put here all headers element before main div
</div>
<div id="main"></div>
<footer></footer>

但如果你不想要我建议的方式，你可以这样做：

body{min-height: 100vh;}
footer{position: absolute; bottom: 0;}

使元素忽略其他元素的绝对位置的影响？

CODE：

HTML

CSS

2 个答案: