2016-05-17 132 views
0

我试图堆叠在彼此像这样的顶部的div:有没有办法堆叠divs?

The image

我用尽了一切办法做到这一点,但还没有取得多大成功。这里是我当前的代码:

.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding-bottom: 48px; 
 
    padding-top: 20px; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
} 
 
#footerCloud { 
 
    background: url(http://i.imgur.com/MyC7W9I.png); 
 
    height: 64px; 
 
}
<div id="footerCloud"></div> 
 
<div class="footer"></div>

+1

* “我用尽了一切” *。你可以说得更详细点吗?我可以从代码中知道它不能很好地工作,因为你定位了'.footer'绝对值,而不是'#footerCloud'。 –

回答

0

这里有一个简单的答案;我去掉绝对值:

.footer { 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding-bottom: 48px; 
 
    padding-top: 20px; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
} 
 
#footerCloud { 
 
    background: url(http://i.imgur.com/MyC7W9I.png); 
 
    height: 64px; 
 
}
<div id="footerCloud"></div> 
 
<div class="footer"></div>

0

可以使用zIndex(仅适用于定位的元素)

html, body { 
 
    height: 100%; 
 
} 
 

 
.table { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    color: #fff; 
 
    z-index: 1; 
 
} 
 

 
.cell { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    top: 61px; 
 
    bottom: 0; 
 
    left: 1px; 
 
    right: 0; 
 
    padding-bottom: 48px; 
 
    padding-top: 20px; 
 
    background-color: #19487f; 
 
    text-align: center; 
 
} 
 

 
#footerCloud { 
 
    background: url('data:image/png;base64,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'); 
 
    height: 64px; 
 
}
<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/> 
 

 
<div class="table"> 
 
    <div class="cell"> 
 
    <h1> 
 
     hello world 
 
    </h1> 
 
    </div> 
 
</div> 
 

 
<div id="footerCloud"></div> 
 
<div class="footer"></div>

+0

我知道,但我试图将一个div垂直放在另一个div上。 – George

1

堆在CSS元素我想你想像这样,在re中使用绝对元素lative父,使其工作:

body { background: #fff} 
 
.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: -68px; 
 
    left: 0; 
 
    padding-bottom: 48px; 
 
    padding-top: 20px; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
} 
 

 
#footerCloud { 
 
    background: url('http://i.imgur.com/MyC7W9I.png'); 
 
    height: 64px; 
 
    position: relative; 
 
}
<div id="footerCloud"> 
 
    <div class="footer"></div> 
 
</div>

Fiddle here

1

我不知道你要的到底是什么,而只是删除绝对定位清除了大部分的问题。颜色不匹配目前很好,但这已经超出了这个问题的范围...

.footer { 
 
    background-color: #efefef; 
 
    text-align: center; 
 
    min-height: 50px; 
 
} 
 
#footerCloud { 
 
    background: url(http://i.imgur.com/MyC7W9I.png); 
 
    height: 64px; 
 
}
<div id="footerCloud"></div> 
 
<div class="footer"></div>