blocks|key|1637177|text|页面中的每个元素都有特定的堆叠顺序。如果您没有显式地设置它们，那么它将按照DOM中的顺序堆叠。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1637178|您可以通过设置属性来控制堆叠顺序|1637179|z-Index|offset|length|1637180|Z索引值越高，元素的堆叠顺序就越高。|1637181|如果可以将gif图像设置为单元格的背景，则|1637182|background-image|1637183|属性将是最好的。首先将gif图像设置为单元格的背景，并将png按钮放在单元格中并将其放置在单元格中。|1637184|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/ms531188%2528VS.85%2529.aspx|1|https://msdn.microsoft.com/en-us/library/ms530717(v=vs.85).aspx^0|0|0|0|7|0|0|0|0|0|G|1|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@$F|12|G|13|1|14]]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|17|8|@]|9|@$F|18|G|19|1|1A]]|A|$]]|$1|N|3|O|5|6|7|1B|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]|X|$5|S|T|U|A|$V|Y]]]]

<p>Each element in a page has a particular stacking order. If you do not set them explicitly then it will be stacked in accordance to the order in DOM.</p>

<p>You can control the stacking order by setting the property</p>

<p><a href="http://msdn.microsoft.com/en-us/library/ms531188%28VS.85%29.aspx" rel="nofollow noreferrer">z-Index</a></p>

<p>The higher the z-index value goes the higher will be the stacking order for the element.</p>

<p>If you can set the gif image as the background of a cell then </p>

<p><a href="https://msdn.microsoft.com/en-us/library/ms530717(v=vs.85).aspx" rel="nofollow noreferrer">background-image</a> </p>

<p>property will be the best one. First set the gif image as a background to the cell and place the png button in the cell and position it inside the cell.</p>


blocks|key|2034253|text|在块级元素(<div>、<td>等)上使用"background-image“CSS属性。对于背景GIF，则将PNG按钮放在该block元素内。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2034254|如下所示：|2034255|<style+type="text/css">
++++div#withBackground+{
++++++++background-image:+url('bitmaps/bg-image.gif');
++++++++background-repeat:+no-repeat;
++++}
</style>

<div+id="withBackground">
++++<img+src="bitmaps/fg-image.png"+/>
</div>|code-block|syntax|javascript|2034256|entityMap^0|6|5|C|4|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Use the "background-image" CSS attribute on a block-level element (<code>&lt;div&gt;</code>, <code>&lt;td&gt;</code> etc.) for the background GIF, then place the PNG buttons inside that block element.</p>

<p>Like this:</p>

<pre><code>&lt;style type="text/css"&gt;
    div#withBackground {
        background-image: url('bitmaps/bg-image.gif');
        background-repeat: no-repeat;
    }
&lt;/style&gt;

&lt;div id="withBackground"&gt;
    &lt;img src="bitmaps/fg-image.png" /&gt;
&lt;/div&gt;
</code></pre>


blocks|key|4144304|text|就像其他人说的-如果你想把图像放在另一个图像的上面，那么你需要z索引。只需记住，z索引只有在嵌套元素设置了位置时才有效-绝对或相对(静态不应用于此)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4144305|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Like other people said - if you want to put images on top of another, then you need z-indexing. Just remember, that z-index only works, if nested elements have position set - absolute or relative (static should not be used for this)</p>


blocks|key|4144310|text|一般解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4144311|对于这样的问题，MDN是一个很好的资源。Understanding+CSS+z-index文章提供了各种方法来完成OP之后的工作。下面将快速介绍其中的几个。|offset|length|4144312|所有示例|4144313|这包括我设置的所有六个基本示例。|4144314|​|4144315|.clear+{
++clear:+both;
}
.relPos+{
++position:+relative;
}
.absPos+{
++position:+absolute;
}
.relPos0+{
++position:+relative;
}
.relPos1+{
++left:+-154px;
++top:+-33px;
++position:+relative;
}
.floatLeft+{
++float:+left;
}
.floatRight+{
++float:+right;
}
.relPos2+{
++position:+relative;
++right:+150px;
}
.bgImg+{
++background-image:+url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
++width:+150px;
++height:+84px;
}
.bgImg2+{
++background-image:+url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
++width:+84px;
++height:+84px;
}
.relPos3+{
++position:+relative;
}
.relPos4+{
++left:+-154px;
++top:+-33px;
++position:+relative;
}
.relPos5+{
++left:+154px;
++top:+25px;
++position:+relative;
}
.relPos6+{
++position:+relative;
}
.relPos7+{
++left:+154px;
++top:+25px;
++position:+relative;
++z-index:+2;
}|code-block|syntax|javascript|4144316|<h1>EX0+-+Default</h1>
<p>Two+images+and+no+CSS.</p>
<img+src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg"+width="150px"+/>
<img+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>

<h1>EX1+-+Position:+Absolute+&amp;+Relative</h1>
<p>Making+one+image's+position+absolute+and+the+other+relative+will+create+an+overlay.</p>
<img+class="absPos"+src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg"+width="150px"+/>
<img+class="relPos"+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>

<h1+style="padding-top:1em;">EX2+-+Position:+Relative+&amp;+Relative</h1>
<p>Both+images+can+have+a+relative+position+but+then+<code>top</code>,+<code>right</code>,+<code>bottom</code>,+or+<code>left</code>+will+need+to+be+utilized.</p>
<img+class="relPos0"+src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg"+width="150px"+/>
<img+class="relPos1"+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>

<h1>EX3+-+Using+Position+&amp;+Float</h1>
<p>Float+can+be+used+with+relative+position,+but+<code>top</code>,+<code>right</code>,+<code>bottom</code>,+or+<code>left</code>+will+need+to+be+utilized.</p>
<div+style="width:200px;">
++<div+class="floatRight+relPos2">
++++<img+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>
++</div>
++<div+class="floatLeft">
++++<img+src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg"+width="150px"+/>
++</div>
</div>

<h1+class="clear">EX4+-+Background-image</h1>
<h2>With+div</h2>
<p>Another+easy+way+to+overlay+images+is+to+make+the+back+image+a+background+image+using+the+CSS+property+<code>background</code>.+Anything+inside+the+element+with+the+background+image+will+appear+on+top.</p>
<div+class="bgImg">
++<img+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>
</div>
<h2>img+Alone</h2>
<p>Instead+of+applying+the+background+image+on+another+element,+it+could+be+applied+to+the+overlay+image+itself.+The+problem+here+is+that+the+png+overlay+would+need+to+be+the+same+size+as+the+background+image.+That's+how+you+would+position+it+over+the+jpg.
++Via+<a+href="http://www.cssmojo.com/png_overlay_with_no_extra_markup/"+target="_blank">CSSMojo.com</a>.</p>
<img+class="bgImg2"+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+alt=""+/>

<h1>EX5+-+Position+&amp;+z-index</h1>
<p>Order+matters+if+z-index+is+not+employed.+EX6+is+an+example+wher+the+ordering+is+correct+and+only+top+and+left+are+used+for+the+positioning.</p>
<img+class="relPos3"+src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg"+width="150px"+/>
<img+class="relPos4"+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>

<h1>EX6+-+Position+&amp;+z-index</h1>
<p>If+both+objects+are+relative,+order+will+matter+when+using+the+<code>top</code>,+<code>right</code>,+<code>bottom</code>,+or+<code>left</code>+properties.+Reordering+the+elements+(see+EX5)+or+using+larger+<code>z-index</code>+values+can+resolve+this+issue.</p>
<img+class="relPos5"+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>
<img+class="relPos6"+src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg"+width="150px"+/>

<img+class="relPos7"+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>
<img+class="relPos6"+src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg"+width="150px"+/>|4144317|4144318|我不会张贴下面的所有示例，而是只包含我认为可以轻松解决OP问题的内容。|4144319|EX1+-位置:绝对和相对|4144320|将一个图像的位置设为absolute，另一个设为relative将创建一个叠加。|style|CODE|4144321|4144322|.relPos+{
++++position:+relative;
}
.absPos+{
++++position:+absolute;
}|4144323|<img+class="absPos"+src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg"+width="150px"+/>
<img+class="relPos"+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>|4144324|4144325|EX2+-+Position:相对和相对|4144326|这两个图像可以有相对位置，但需要使用top、right、bottom或left属性。|4144327|4144328|.relPos0+{
++++position:+relative;
}
.relPos1+{
	left:+-154px;
	top:+-33px;
++++position:+relative;
}|4144329|<img+class="relPos0"+src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg"+width="150px"+/>
<img+class="relPos1"+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>|4144330|4144331|EX4+-背景-使用div的图像|4144332|覆盖图像的另一种简单方法是使用CSS属性background将背景图像设置为背景图像。元素中包含背景图像的任何内容都将显示在顶部。|4144333|4144334|.bgImg+{
++++background-image:+url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
++++width:+150px;
++++height:+84px;
}|4144335|<div+class="bgImg">
++++<img+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>
</div>|4144336|4144337|EX6位置和z索引|4144338|如果两个对象都是相对的，则在使用top、right、bottom或left属性时，顺序将很重要。重新排序元素(请参见EX5)或使用更大的z-index值可以解决此问题。|4144339|4144340|.relPos5+{
	left:+154px;
	top:+25px;
++++position:+relative;
}
.relPos6+{
++++position:+relative;
}
.relPos7+{
	left:+154px;
	top:+25px;
++++position:+relative;
	z-index:+2;
}|4144341|<img+class="relPos5"+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>
<img+class="relPos6"+src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg"+width="150px"+/>

<img+class="relPos7"+src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png"+width="50px"+/>
<img+class="relPos6"+src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg"+width="150px"+/>|4144342|4144343|替代方案|4144344|技巧涵盖了一种只利用background属性的CSS3分层技术。|4144345|background:+
+++url(number.png)+600px+10px+no-repeat,++/*+On+top,++++like+z-index:+4;+*/
+++url(thingy.png)+10px+10px+no-repeat,+++/*++++++++++++like+z-index:+3;+*/
+++url(Paper-4.png);++++++++++++++++++++++/*+On+bottom,+like+z-index:+1;+*/|4144346|通过http://css-tricks.com/stacking-order-of-multiple-backgrounds/|4144347|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index|1|http://css-tricks.com/stacking-order-of-multiple-backgrounds/^0|0|K|P|0|0|0|0|0|0|0|0|0|0|A|8|O|8|0|0|0|0|0|0|I|3|M|5|S|6|Z|4|0|0|0|0|0|0|K|A|0|0|0|0|0|0|G|3|K|5|Q|6|X|4|1W|7|0|0|0|0|0|0|A|A|0|0|2|1P|1|0^^$0|@$1|2|3|4|5|6|7|2J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|2K|8|@]|9|@$D|2L|E|2M|1|2N]]|A|$]]|$1|F|3|G|5|6|7|2O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|2P|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|2R|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|2S|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|2T|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|2U|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|2V|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|2W|8|@$D|2X|E|2Y|Z|10]|$D|2Z|E|30|Z|10]]|9|@]|A|$]]|$1|11|3|K|5|6|7|31|8|@]|9|@]|A|$]]|$1|12|3|13|5|N|7|32|8|@]|9|@]|A|$O|P]]|$1|14|3|15|5|N|7|33|8|@]|9|@]|A|$O|P]]|$1|16|3|K|5|6|7|34|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|35|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|36|8|@$D|37|E|38|Z|10]|$D|39|E|3A|Z|10]|$D|3B|E|3C|Z|10]|$D|3D|E|3E|Z|10]]|9|@]|A|$]]|$1|1B|3|K|5|6|7|3F|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|N|7|3G|8|@]|9|@]|A|$O|P]]|$1|1E|3|1F|5|N|7|3H|8|@]|9|@]|A|$O|P]]|$1|1G|3|K|5|6|7|3I|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|3J|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|3K|8|@$D|3L|E|3M|Z|10]]|9|@]|A|$]]|$1|1L|3|K|5|6|7|3N|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|N|7|3O|8|@]|9|@]|A|$O|P]]|$1|1O|3|1P|5|N|7|3P|8|@]|9|@]|A|$O|P]]|$1|1Q|3|K|5|6|7|3Q|8|@]|9|@]|A|$]]|$1|1R|3|1S|5|6|7|3R|8|@]|9|@]|A|$]]|$1|1T|3|1U|5|6|7|3S|8|@$D|3T|E|3U|Z|10]|$D|3V|E|3W|Z|10]|$D|3X|E|3Y|Z|10]|$D|3Z|E|40|Z|10]|$D|41|E|42|Z|10]]|9|@]|A|$]]|$1|1V|3|K|5|6|7|43|8|@]|9|@]|A|$]]|$1|1W|3|1X|5|N|7|44|8|@]|9|@]|A|$O|P]]|$1|1Y|3|1Z|5|N|7|45|8|@]|9|@]|A|$O|P]]|$1|20|3|K|5|6|7|46|8|@]|9|@]|A|$]]|$1|21|3|22|5|6|7|47|8|@]|9|@]|A|$]]|$1|23|3|24|5|6|7|48|8|@$D|49|E|4A|Z|10]]|9|@]|A|$]]|$1|25|3|26|5|N|7|4B|8|@]|9|@]|A|$O|P]]|$1|27|3|28|5|6|7|4C|8|@]|9|@$D|4D|E|4E|1|4F]]|A|$]]|$1|29|3|-4|5|6|7|4G|8|@]|9|@]|A|$]]]|2A|$2B|$5|2C|2D|2E|A|$2F|2G]]|2H|$5|2C|2D|2E|A|$2F|2I]]]]

<h2>General Solutions</h2>

<p>MDN is a great resource for questions like this one. The <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index" rel="nofollow">Understanding CSS z-index</a> article provides various ways to accomplish what OP's after. A few are quickly covered below.</p>

<h3>All Examples</h3>

<p>This includes all six basic examples I setup.</p>

<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.clear {
  clear: both;
}
.relPos {
  position: relative;
}
.absPos {
  position: absolute;
}
.relPos0 {
  position: relative;
}
.relPos1 {
  left: -154px;
  top: -33px;
  position: relative;
}
.floatLeft {
  float: left;
}
.floatRight {
  float: right;
}
.relPos2 {
  position: relative;
  right: 150px;
}
.bgImg {
  background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
  width: 150px;
  height: 84px;
}
.bgImg2 {
  background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
  width: 84px;
  height: 84px;
}
.relPos3 {
  position: relative;
}
.relPos4 {
  left: -154px;
  top: -33px;
  position: relative;
}
.relPos5 {
  left: 154px;
  top: 25px;
  position: relative;
}
.relPos6 {
  position: relative;
}
.relPos7 {
  left: 154px;
  top: 25px;
  position: relative;
  z-index: 2;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;EX0 - Default&lt;/h1&gt;
&lt;p&gt;Two images and no CSS.&lt;/p&gt;
&lt;img src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" /&gt;
&lt;img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;

&lt;h1&gt;EX1 - Position: Absolute &amp;amp; Relative&lt;/h1&gt;
&lt;p&gt;Making one image's position absolute and the other relative will create an overlay.&lt;/p&gt;
&lt;img class="absPos" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" /&gt;
&lt;img class="relPos" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;

&lt;h1 style="padding-top:1em;"&gt;EX2 - Position: Relative &amp;amp; Relative&lt;/h1&gt;
&lt;p&gt;Both images can have a relative position but then &lt;code&gt;top&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt;, or &lt;code&gt;left&lt;/code&gt; will need to be utilized.&lt;/p&gt;
&lt;img class="relPos0" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" /&gt;
&lt;img class="relPos1" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;

&lt;h1&gt;EX3 - Using Position &amp;amp; Float&lt;/h1&gt;
&lt;p&gt;Float can be used with relative position, but &lt;code&gt;top&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt;, or &lt;code&gt;left&lt;/code&gt; will need to be utilized.&lt;/p&gt;
&lt;div style="width:200px;"&gt;
  &lt;div class="floatRight relPos2"&gt;
    &lt;img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;
  &lt;/div&gt;
  &lt;div class="floatLeft"&gt;
    &lt;img src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" /&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h1 class="clear"&gt;EX4 - Background-image&lt;/h1&gt;
&lt;h2&gt;With div&lt;/h2&gt;
&lt;p&gt;Another easy way to overlay images is to make the back image a background image using the CSS property &lt;code&gt;background&lt;/code&gt;. Anything inside the element with the background image will appear on top.&lt;/p&gt;
&lt;div class="bgImg"&gt;
  &lt;img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;
&lt;/div&gt;
&lt;h2&gt;img Alone&lt;/h2&gt;
&lt;p&gt;Instead of applying the background image on another element, it could be applied to the overlay image itself. The problem here is that the png overlay would need to be the same size as the background image. That's how you would position it over the jpg.
  Via &lt;a href="http://www.cssmojo.com/png_overlay_with_no_extra_markup/" target="_blank"&gt;CSSMojo.com&lt;/a&gt;.&lt;/p&gt;
&lt;img class="bgImg2" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" alt="" /&gt;

&lt;h1&gt;EX5 - Position &amp;amp; z-index&lt;/h1&gt;
&lt;p&gt;Order matters if z-index is not employed. EX6 is an example wher the ordering is correct and only top and left are used for the positioning.&lt;/p&gt;
&lt;img class="relPos3" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" /&gt;
&lt;img class="relPos4" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;

&lt;h1&gt;EX6 - Position &amp;amp; z-index&lt;/h1&gt;
&lt;p&gt;If both objects are relative, order will matter when using the &lt;code&gt;top&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt;, or &lt;code&gt;left&lt;/code&gt; properties. Reordering the elements (see EX5) or using larger &lt;code&gt;z-index&lt;/code&gt; values can resolve this issue.&lt;/p&gt;
&lt;img class="relPos5" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;
&lt;img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" /&gt;

&lt;img class="relPos7" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;
&lt;img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" /&gt;</code></pre>
</div>
</div>
</p>

<p>Instead of posting all the examples below, I am only including what I think will easily solve the OP's problem.</p>

<h3>EX1 - Position: Absolute &amp; Relative</h3>

<p>Making one image's position <code>absolute</code> and the other <code>relative</code> will create an overlay.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.relPos {
    position: relative;
}
.absPos {
    position: absolute;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="absPos" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" /&gt;
&lt;img class="relPos" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;</code></pre>
</div>
</div>
</p>

<h3>EX2 - Position: Relative &amp; Relative</h3>

<p>Both images can have a relative position but then <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> properties will need to be utilized.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.relPos0 {
    position: relative;
}
.relPos1 {
	left: -154px;
	top: -33px;
    position: relative;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="relPos0" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" /&gt;
&lt;img class="relPos1" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;</code></pre>
</div>
</div>
</p>

<h3>EX4 - Background-image using a div</h3>

<p>Another easy way to overlay images is to make the back image a background image using the CSS property <code>background</code>. Anything
inside the element with the background image will appear on top.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.bgImg {
    background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
    width: 150px;
    height: 84px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bgImg"&gt;
    &lt;img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<h3>EX6 - Position &amp; z-index</h3>

<p>If both objects are relative, order will matter when using the <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> properties. Reordering the elements (see EX5) or using larger <code>z-index</code> values can 
resolve this issue.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.relPos5 {
	left: 154px;
	top: 25px;
    position: relative;
}
.relPos6 {
    position: relative;
}
.relPos7 {
	left: 154px;
	top: 25px;
    position: relative;
	z-index: 2;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="relPos5" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;
&lt;img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" /&gt;

&lt;img class="relPos7" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" /&gt;
&lt;img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" /&gt;</code></pre>
</div>
</div>
</p>

<h2>Alternatives</h2>

<p>CSS-Tricks covers a layering technique with CSS3 utilizing the <code>background</code> property only.</p>

<pre><code>background: 
   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);                      /* On bottom, like z-index: 1; */
</code></pre>

<p>via <a href="http://css-tricks.com/stacking-order-of-multiple-backgrounds/" rel="nofollow">http://css-tricks.com/stacking-order-of-multiple-backgrounds/</a></p>


<p>I am creating a webpage and I am trying to put a png (buttons) over gif files.
When the page renders, it makes the png file appear after or under the gif file.
I tried using  and  tags but neither work.  I have also tried using various CSS padding, alignments etc. but it doesn't seem to work.
Is there a way (code) to get images to appear on top of images?</p>


Image over Image CSS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在创建一个网页，我试图把一个png (按钮)在gif文件上。当页面呈现时，它会使png文件出现在gif文件之后或之下。我尝试使用和标签，但都不起作用。我也试过使用各种CSS填充，对齐等，但似乎不起作用。有没有办法(代码)让图像出现在图像的顶部？

问Image over Image CSS
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Image over Image CSSEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Image over Image CSS
EN