0

id="b"Divを他の Divに配置したいのですid="a"が、代わりに Divid="b"の下に Divを取得します。Cssid="a"で何を変更する必要がありますか?

HTML:

 <div class="picad30">
   <div class="pic_sin30" id="a">
       <img width="110" border="0" class="pic_sin30" src="SMALLAD.png"/>
   </div>
   <div class="picgar30 p" id="b"></div>
   <div >
       <div >upload</div>
       <div ></div>
   </div>
 </div>

CSS:

.picad30{
    width:130px;
    float:right;
    display:table;
    margin: 20px 0 0 0px;
    position: relative;
}

.pic_sin30{
    border: 1px solid #ccc;
    height: 87px;
    overflow: hidden;
    width: 130px;
    position: relative;
    z-index:1;
}

.picgar30{
    background-position:-5px -244px;
    cursor:pointer;
    height: 20px;
    width: 20px;
    float:left;
    z-index:20;
    position:absolute;
}

.p {
    background-image: url("PIC/icon.png");
    background-repeat: no-repeat;
}
4

2 に答える 2

1

これを試して

.p {
   background-image: url("PIC/icon.png");
   background-repeat: no-repeat;
   z-index:2;
   position:absolute !important;
   top:0;
   left:0;
}

あなたの役に立つかもしれませんこれを読んでください

編集

働くフィドル

于 2013-09-10T13:40:49.477 に答える
0

そのため、コードをいくつか更新しました。質問を正しく解釈できたことを願っています。.pic_gar30 or id=b 上に積み重ねたいと言っているのは正しい.pic_sin30 or id=aですか？そして、その上に.pic_gar30アイコンを追加しますか?

これが正しければ、次のことを行いました。2 つの画像 div を pic-container という名前の親 div にラップしました。この親 div は、画像で使用したい高さと相対的な位置を持っているため、画像を内部に絶対に配置できます。後ろに隠れているアップロードテキストも。

両方の画像ホルダーで同じ css を使用したいので、両方にクラス img-holder を指定し、絶対位置にスタイルを適用しました.pic-gar30 comes after .pic_sin30 it will automatically be positioned on top。ただし、必要に応じて、z-index を .pic_gar30 に追加できます。次に、アイコンを画像の上に配置するために、.pic_gar30 で::after 擬似クラス セレクタhttp://css-tricks.com/pseudo-class-selectors/を使用しました。

http://jsfiddle.net/LXaCT/に役立つことを願っている私の例を参照してください。

于 2013-09-10T14:05:35.097 に答える