web-dev-qa-db-ja.com

別のDIVの上にDIVをフロートする

私は最近、以前のWeb開発者が作成したJSポップアップをコピーする仕事を割り当てられました。よく似ていますが、閉じるボタン（X）が（ポップアップの右上隅に座っているのではなく）右上隅のポップアップの上に浮かんでいるため、取得できないことが1つあります。私は、CSSのposition:の値と、スタックオーバーフローの周辺で見つけたその他の属性を試しましたが、だれもこのトリックを実行していないようです。

CSS：

#popup {
    position:absolute;
    display:hidden;
    top:50%;
    left:50%;
    width:400px;
    height:586px;
    margin-top:-263px;
    margin-left:-200px;
    background-color:#fff;
    z-index:2;
    padding:5px;
}
#overlay-back {
    position : fixed;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    background : #000;
    opacity : 0.7;
    filter : alpha(opacity=60);
    z-index : 1;
    display: none;
}
.close-image {
    display: block;
    float:right;
    cursor: pointer;
    z-index:3
}

HTML：

<div id="overlay-back"></div>
<div id="popup">
    <img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" width="400" height="566" /></span>
</div>
csshtmlposition
16
Brad Adams

クラスの右側と上部に位置を追加するだけで_.close-image

.close-image {
    cursor: pointer;
    display: block;
    float: right;  
    z-index: 3;
    position: absolute; /*newly added*/
    right: 5px; /*newly added*/
    top: 5px;/*newly added*/
}
25
Swarnamayee Mallia

このcssを使用

.close-image {
    cursor: pointer;
    z-index: 3;
    right: 5px;
    top: 5px;
    position: absolute;
}
3
Rohit Azad
.close-image {
    cursor: pointer;
    display: block;
    float: right;
    position: relative;
    top: 22px;
    z-index: 1;
}

これがあなたが探しているものだと思う。

2
noob

私はこの投稿が少し古いことを知っていますが、同じ問題を抱えている人のための潜在的なソリューションがあります：

まず、＃popupのCSS表示を「hidden」ではなく「none」に変更します。

次に、HTMLを次のように変更します。

<div id="overlay-back"></div>
<div id="popup">
    <div style="position: relative;">
        <img class="close-image" src="images/closebtn.png" />
        <span><img src="images/load_sign.png" width="400" height="566" /></span>
    </div>            
</div>

また、スタイルについては次のとおりです。

.close-image
{
   display: block;
   float: right;
   cursor: pointer;
   z-index: 3;
   position: absolute;
   right: 0;
   top: 0;
}

このアイデアは、このWebサイト（kessitek.com）から得ました。要素の配置方法に関する非常に良い例：

divを別のdivの上に配置する方法

これがお役に立てば幸いです、

ザグ、

1
zag

どうですか：

.close-image{
    display:block;
    cursor:pointer;
    z-index:3;
    position:absolute;
    top:0;
    right:0;
}

それは望ましい結果ですか？

0
Johan Bouveng