相對於固定父母固定的位置

我有一個固定位置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

相對於固定父母固定的位置

回答

相關問題