Question

我在magento中遇到CSS问题 - 但我认为这是一个普遍的CSS问题：

我有下面的代码，它显示的是一个图像，文本框与其左上角对齐。（这似乎工作正常）。

然而，图像本身并非“清除”。正常。实际页面或其他div与图像重叠 - 因此其中一半是隐藏的。就好像图像漂浮在背景中一样。

如何强制它以便显示整个图像并获得所需的空间？

<h2>title</h2>
<h3>sub-title</h3>
<h3>some text</h3>
<div style="position: absolute;"><!-- start div for image -->
<img style="z-index: -1; vertical-align:top;" src="{{media url="wysiwyg/image.jpg"}}" alt="" /> <!-- the image --></div>
<!-- end div -->
<div style="position: relative; z-index: 1; left: 50%; top: 75%; width: 300px; height: 100px; -webkit-border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px; border-radius: 35px 0px 35px 0px; background: rgba(24,105,15,0.5); padding: 20px 5px 25px 35px; -webkit-box-shadow: #B3B3B3 5px 5px 5px; -moz-box-shadow: #B3B3B3 5px 5px 5px; box-shadow: #B3B3B3 5px 5px 5px;">
    <div style="margin: auto;"><strong>TEXT BOX TITLE</strong>
    <ul style="list-style-type: square;">
    <li>a list of text</li>
    <li>a list of text</li>
    <li>a list of text</li>
    <li>a list of text</li>
    <li>a list of text</li>
    </ul>
    </div>
    </div>

图像与其他div重叠

0 个答案: