Question

这就是我想要完成的事情：

 _____________________________________________________________________________
|    option             option               option            option         |
|_____________________________________________________________________________|
  |  image  |         |  image  |          |  image  |       |  image  |
  |_________|         |_________|          |_________|       |_________|

在菜单栏中只有选项而不是按钮。此外，图像仅显示下半部分。我试过这个：

HTML

<div class="m_img"> <img src="image1.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image2.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image3.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image4.png" width="60px" height="30px"> </div>
<div id="menu_bar" class="centered">
    <a class="m_button" href="javascript:change(0)"> text0 </a>
    <a class="m_button" href="javascript:change(1)"> text1 </a>
    <a class="m_button" href="javascript:change(2)"> text2 </a>
    <a class="m_button" href="javascript:change(3)"> text3 </a>
</div>

CSS

.m_img {
     float: left;
     width: 250px;
     z-index: 1;
}
.m_button {
     float: left;
     width: 250px;
     font-size: 110%;
     z-index: 2;
}

但菜单栏下降并且不与图像重叠。知道如何设置它吗？

Answer 1

HTML：

<div style="width:400px; background-color: red; font-size:1em; height:1em">
    <span class="menup option">option1</span>
    <span class="menup option">option2</span>
    <div style="z-index: -1; width: 100%; position:relative; top:-0.5em;">
        <span class="menup">menu1</span>
        <span class="menup">menu2</span>
    </div>
</div>

CSS：

.menup { background-color: blue; width: 6em; display: inline-block; margin-left: 1em; margin-right: 1em; }
.option { background-color: green; }

请参阅http://jsfiddle.net/mK4bJ/1/

如果你有评论，我很乐意听到。

在图像上重叠div

1 个答案: