Question

我正在使用一个用于灯箱的css文件，它在图像底部显示关闭X十字架我希望在顶部如何做到这一点

belwo是我的css文件

 /* line 112, ../sass/lightbox.sass */

 .lb-data .lb-close {
 width: 35px;
 float: right;
 padding-bottom: 0.7em;
  outline: none;
}


/* line 117, ../sass/lightbox.sass */


.lb-data .lb-close:hover {
 cursor: pointer;
 }

Answer 1

嘿，我想你想要像这样

首先想到你应该定义你的主容器位置相对并给出绝对关闭按钮位置，并根据你的布局定义左上方的底部......

<强>的CSS

.lb-data{
width:200px;
    height:200px;
    background:red;
    margin:100px 0 0 100px;
    position:relative;
}

.lb-data .lb-close {
 width: 35px;
    height:25px;
  position: absolute;
 padding-bottom: 0.7em;
  outline: none;
    top:-36px;
    right:-13px;
    background:green;
    color:white;
    font-weight:bold;
}


/* line 117, ../sass/lightbox.sass */


.lb-data .lb-close:hover {
 cursor: pointer;
 }

<强> HTML

<div class="lb-data">


    <div class="lb-close">XX</div>

</div>

现场演示http://jsfiddle.net/rohitazad/GgGzm/

如何使位置在css文件中关闭X在顶部而不是底部

1 个答案: