固定div旁邊的父div

我試圖讓一個div與父div旁邊的按鈕。像這樣：固定div旁邊的父div

____________ 
|relative | 
|   | 
|   | 
|   |_______ 
|   | fixed | 
|   |_______| 
|   | 
|   | 
|__________|

固定div必須在滾動期間固定，但始終在父代旁邊並且不在父代之下或之上。

也許有人知道這個問題的解決方案。請告訴我。您正在尋找position: absolute

來源

2013-03-15 MmynameStackflow

你有沒有什麼你以前嘗試？如果是這樣 - 你能發佈你的代碼嗎？ – micp 2013-03-15 10:46:14

「固定」意味着它永遠不會移動，如果你滾動頁面「絕對」的意思是，它在頁面滾動時移動，但添加元素不會妨礙其位置你想要什麼？ – madhairsilence 2013-03-15 10:47:54

我想我會爲你提供一個解決方案。主要問題是，與position: fixed總是相對身體。它的行爲與position: absolute中的元素有所不同，該元素與聲明的positiono: relatvie的父元素相關。

所以主要問題是，如果將left設置爲固定元素，則它會粘貼到body元素的左邊緣，即使它的父級位於相對位置。但是您可以使用一個技巧，並跳過固定元素的left聲明。比方說，這是你的HTML：

<div class="main"> 
    <!-- your content --> 
</div> 
<div class="fake-wrapper"> 
    <div class="fixed"> 
    <a href="/">click!</a> 
    </div> 
</div>

，這應該是你的CSS：

.main { 
    /*just for visualisation*/ 
    width: 300px; 
    height: 1500px; 
    background: #ccc; 
} 
.main, 
.fake-wrapper { 
    float: left; 
} 
.fixed { 
    position: fixed; 
    top: 50%; 
}

這裏有一個工作示例：jsFiddle example

來源

2013-03-15 11:21:13

，不是固定不變的 - 如果你的父母有類parent和按鈕具有類button，你需要的是類似於（假設按鈕有100px的這種固定寬度）：

.parent { position: relative; } 
.button { position: absolute; top: 45%; right: -100px; }

這裏是一個例子小提琴（增加了一些寬度/高度來證明，這些應該來自你的內容，而不是）http://jsfiddle.net/WpnP4/

編輯：剛剛意識到這個問題是不是100％清楚 - 我以爲你想要butto n在特定元素旁邊並與屏幕一起滾動。如果您希望按鈕元素在屏幕中保持固定，請使用position:fixed。

來源

2013-03-15 10:46:44 hexblot

使用position:fixed的第二個div

HTML

<div class="main"> 
    zx 
</div> 
<div class="fix"> 
    <button>Click</button> 
</div>

CSS

html, body{ 
    height:100%; 
    margin:0 
} 
.main{ 
    height:100%; 
    width:50%; 
    background:grey; 
} 
.fix{ 
    position:fixed; 
    top:50%; 
    border:red solid 2px; 
    background:yellow; 
    left:50% 
}

DEMO

來源

2013-03-15 10:48:04 Sowmya

好的，我修復了按鈕，但是如何在父div旁邊「附加」它。有沒有與jQuery的方式？ – MmynameStackflow 2013-03-15 10:55:34

@MmynameStackflow因爲我不知道你的HTML結構如何，你可以發佈你的工作演示 – Sowmya 2013-03-15 10:56:44

固定div旁邊的父div

回答

相關問題