html - 叠加图像

Question

我能描述的最好方式是展示。

<div style="position: absolute; z-index:100">This is in background</div> 
<div style="position: absolute; z-index:5000">This is in foreground</div> 

我想也许它可以以类似的方式使用，但我认为我太愚蠢了。

我想我得到了旋转部分，我在互联网上看到了很多 css 代码。因此，如果我能得到一些帮助并找到一种方法将横幅放在我的容器顶部，那将是一个巨大的帮助!

我希望它位于此之上:

我想要的:http://i.imgur.com/E5DuDSw.jpg 横幅:http://i.imgur.com/LTUZE58.jpg

我试过这个:

    <div id=container>
    <div style="clear:both; height: 40px"></div>
    <div class=box_highlight>
    <h2 style="text-align: center; color: #000000;">Bestellen Sie jetzt!</h2>
    <center>
    <h3>
    <ul style="padding-top:30px">
    <li>-	Blick ins Olympiastadion München</li>
    <li>-	Hochwertiges, doppellagiges Polyester-Pongée-Material</li>
    <li>-	Durchmesser ca. 140 cm</li>
    <li>-	Stabiles Metallgestänge</li>
    </ul>
    </h3>
    <h2 class="priceSize" style="text-align: center; color: #000000" ><br>
    Preis: 24,90 €
    </h2>
    
    <h3>
    <ul style="padding-top:30px">
    <li>zzgl. Versandkosten: Deutschland: 4,95 € / EU: 14,95 € / Schweiz: 22,70 € </li>
    </ul>
    </h3>
    </center>
    <br>
    </div>

谢谢!

Answer 1

试试这个:

<div id=container style="position:relative;">
<div style="position:absolute; top: 0; left:-50px; transform:rotate(-45deg)"><img src="http://i.imgur.com/LTUZE58.jpg" alt="" width="300"></div>
<div style="clear:both; height: 40px"></div>
<div class=box_highlight>
<h2 style="text-align: center; color: #000000;">Bestellen Sie jetzt!</h2>
<center>
<h3>
<ul style="padding-top:30px">
<li>-   Blick ins Olympiastadion München</li>
<li>-   Hochwertiges, doppellagiges Polyester-Pongée-Material</li>
<li>-   Durchmesser ca. 140 cm</li>
<li>-   Stabiles Metallgestänge</li>
</ul>
</h3>
<h2 class="priceSize" style="text-align: center; color: #000000" ><br>
Preis: 24,90 €
</h2>

<h3>
<ul style="padding-top:30px">
<li>zzgl. Versandkosten: Deutschland: 4,95 € / EU: 14,95 € / Schweiz: 22,70 € </li>
</ul>
</h3>
</center>
<br>
</div>

这是 fiddle

我不知道您是否将所有 CSS 嵌入到 html 中以提出您的问题，但您真的应该将所有 CSS 都放在一个单独的样式表中。