相对于固定父母固定的位置

我有一个固定位置DIV叫做Lightbox。我的问题是，当我滚动内容时，关闭按钮不会保留在右上角。相对于固定父母固定的位置

我该如何实现关闭按钮停留在右上角？

<div class="lightbox"> 
    <div class="close-btn">x</div> 
    <div class="container"> 
     <div class="items"> 
      <div class="item">Item</div> 
      <div class="item">Item</div> 
      <div class="item">Item</div> 
      <div class="item">Item</div> 
     </div> 
    </div> 
</div>

：

Fiddle Link

.lightbox { 
 
    position: fixed; 
 
    background: white; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 600px; 
 
    height: 400px; 
 
    border: 1px solid black; 
 
    margin-left: -300px; 
 
    margin-top: -200px; 
 
    z-index: 10000; 
 
    overflow-y: auto; 
 
} 
 
.close-btn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    background: black; 
 
    color: white; 
 
    font-weight: bold; 
 
    border-radius: 100%; 
 
    width: 20px; 
 
    height: 20px; 
 
    text-align: center; 
 
} 
 
.item { 
 
    width: 250px; 
 
    display: inline-block; 
 
    border: 1px solid blue; 
 
    height: 300px; 
 
    background: lightblue; 
 
}

<div class="lightbox"> 
 
    <div class="close-btn">x</div> 
 
    <div class="items"> 
 
     <div class="item">Item</div> 
 
     <div class="item">Item</div> 
 
     <div class="item">Item</div> 
 
     <div class="item">Item</div> 
 
    </div> 
 
</div>

来源

2015-02-06 pbaldauf

改变位置：固定.close-BTN http://jsfiddle.net/dgw8tj5r/2/ – Sathish 2015-02-06 12:48:51

使用位置固定为'关闭按钮'。 – 2015-02-06 12:50:45

@SathishS对不起，但按钮应该在** lightbox ** div的右上角，而不是** html **元素。优选的是纯粹的CSS解决方案。 – pbaldauf 2015-02-06 12:51:54

使项目div滚动而不是灯箱，然后关闭按钮将保持绝对位置在右上角。

这里是我改变了CSS：

.lightbox { 
    overflow: hidden; 
} 

.close-btn { 
    top: 5px; 
    right: 20px; 
} 

.items { 
    width: 600px; 
    height: 400px; 
    overflow-y: auto; 
}

的jsfiddle：http://jsfiddle.net/dgw8tj5r/4/

来源

2015-02-06 12:58:32

您可以通过调整你的HTML了一下，将一个容器添加到您的收藏夹内容实现了粘扣式你lightBox DIV然后，而不是.lightbox div，您添加适当的宽度，高度，溢出关系到这个新的.container。

.container{ 
    overflow-y: auto; 
    width: 600px; 
    height: 400px; 
}

现在你的close-btn将不会包含在滚动部分。

JSFiddle demo

编辑：本雅明的答案是更有效率的版本，因为你实际上已经有一个包含分区：.items。你可以使用它而不是添加一个新的。

来源

2015-02-06 12:53:56

Anshelin这不是解决我认为的问题。OP显然希望有一个固定的位置在她的固定元素中，这更难但不是不可能。 – Michelangelo 2015-02-06 13:01:20

@Mikey编辑答案，以反映OP想要什么 – 2015-02-06 13:01:44

我明白了！我认为这是OP寻找的东西:) – Michelangelo 2015-02-06 13:04:16

绘制适当位置的灯箱。
2.添加关闭按钮和容器内的灯箱和关闭按钮的位置，你需要的位置。 3.最后添加容器内物品。

多数民众赞成它。

谢谢。

这里

<div class="lightbox"><div class="close-btn">x</div> 
    <div class="lightboxdv"> 
    <div class="items"> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
    </div> 
    </div> 
</div> 

.lightbox { 
    position: fixed; 
    background: white; 
    top: 50%; 
    left: 50%; 
    border: 1px solid black; 
    margin-left: -300px; 
    margin-top: -200px; 
    z-index: 10000; 
    overflow:hidden;  
} 

.lightboxdv{ 
    width: 560px; 
    height: 400px; 
    overflow-y: auto; 
} 

.close-btn { 
    position: absolute; 
    top: 0; 
    right: 20px; 
    background: black; 
    color: white; 
    font-weight: bold; 
    border-radius: 100%; 
    width: 20px; 
    height: 20px; 
    text-align: center; 
} 

.item { 
    width: 250px; 
    display: inline-block; 
    border: 1px solid blue; 
    height: 300px; 
    background: lightblue; 
}

来源

2015-02-06 12:54:40

请考虑在代码中添加一些解释，以便其他观众更容易理解它的工作原理。 – 2015-02-06 13:12:57

修复了所有你需要做的是改变.close-btn位置固定。

.close-btn { 
    position: fixed; 
}

我希望它的作品！

来源

2015-02-06 12:56:57

相对于固定父母固定的位置

回答

相关问题