html - 让一个元素忽略另一个元素的绝对位置的影响？

Question

我在网站元素定位方面遇到了问题。我的网站由一个带有 class="main" 的大 div 和一个页脚组成。我想让我的主要类(class)的利润率达到 80%。不管我在这个 div 上面放了什么，我都希望它保持在那个位置。为此，我将其设为 position: absolute 和 top: 80%。问题是通过这样做我的 div 忽略了文档流并且我的页脚移动到页面顶部。我可以通过给它一个 position: absolute 和 top:# 来解决这个问题，但是我对其他页面使用相同的样式表，然后我必须为每个页面设置一个顶部的网站。有什么方法可以让我的页脚忽略 position:absolute 的 main 并紧跟在 main 之后？

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

代码:

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 到页脚。

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>