0

別の要素の上に配置したいグラフィック要素があります。再利用のないものに css セレクターを作成したくないので、疑似クラスを適用しました。:first-element他の要素の上にあるはずの要素が、他の要素によって隠されています。

これが私のJS BINです

HTML

<div class="wrapper">
    <div></div>
    <div></div>
</div>

CSS

.wrapper {
  position: relative;
}
.wrapper:first-child {
  position: absolute;
  width:50px;
  height:50px;
  top:25px;
  left: 25px; 
  background: red;
  z-index: 100;
}
.wrapper:last-child {
  position: relative;
  width:100px;
  height:100px;
  background: orange;
}

追加した

ご意見ありがとうございます。これでどこが間違っていたのかがわかりました（子要素に適用される疑似クラス）

問題を切り分けるためにサンプルを作成しましたが、実際には、一方が<img>他方<img>の上に<img> あり、html 構造が

<div class="brand">
    <a href="#"><img src=""/></a>
    <a href="#"><img src=""/></a>
</div>

CSSは

.brand img:last-child {
    position: relative;
}
.brand img:first-child {  
    position: absolute;
    top:10px;
    left:15px;
}

単純な div の例のようには機能しません。これは、考慮する必要がある別のアンカー要素があるためだと思います。

4

1 に答える 1

5

.wrapper > div:first-child代わりにandを使用する必要があり.wrapper > div:last-childます。

.wrapper > div:first-child {
  position: absolute;
  width:50px;
  height:50px;
  top:25px;
  left: 25px; 
  background: red;
  z-index: 100;
}
.wrapper > div:last-child {
  position: relative;
  width:100px;
  height:100px;
  background: orange;
}

あなたが編集したとおり：

あなたはこのようにするべきです

.brand a:last-child img {
    position: relative;
}
.brand a:first-child img {  
    position: absolute;
    top:10px;
    left:15px;
}
于 2013-09-15T11:01:18.393 に答える