我有两个div，我希望首先出现在html的第二个顶部，第二个div属性不能更改

Question

我有两个div元素，我无法更改第二个div的属性。

我希望第一个div出现在second div的顶部，而第二个div应该留在它后面。

.second{
    height: 100px;
    background: #000 !important;
    padding: 0px !important;
    margin: 0px !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    float: right !important;
    padding-top: 6px !important;
    visibility: inherit !important}
    
.first{
   /* what must be here? */
}

<div class="first">
    attributes of this div can be changed 
</div>

<div class="second">
    attributes of this div cant be changed
</div>

Answer 1

使用z-index属性+相同的填充和.second：

.first{
    position: absolute;
    z-index: 1;
    padding-top: 6px;
}

codepen

Answer 2

.first {
   /* what must be here? */
    background: rgba(255,0,0,0.2);
     height: 100px;
     position: absolute;
     padding-top: 6px;
     width:100%;
     color: red;
     z-index:2;
}

＆＃13;

＆＃13;

.second{
    height: 100px;
    background: rgb(0,255,0,0.2);
    padding: 0px !important;
    margin: 0px !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    float: right !important;
    padding-top: 20px !important;
    visibility: inherit !important;
    z-index:1;
  }
    
.first {
   /* what must be here? */
    background: rgba(255,0,0,0.2);
     height: 100px;
     position: absolute;
     padding-top: 6px;
     width:100%;
     color: red;
     z-index:2;
}

＆＃13;

<div class="first">
    Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 
</div>

<div class="second">
    Div 2  Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2
</div>

＆＃13;

＆＃13;

＆＃13;