從內容位置左浮動div，而不是左頁

在我的網頁，我有一個div，即使在用戶滾動時仍然保持靜態。從內容位置左浮動div，而不是左頁

這是DIV的CSS：

.floatingDiv 
{ 
    position:fixed; 
    top:300px; 
    left:70px; 
    padding:16px; 
}

正如你所看到的，我是相對於頁面的左上角的DIV定位。

但是，我的主要內容只有1000px寬，我想從我的內容的左邊緣而不是屏幕的左邊緣定位此div。在我的1440x900分辨率下，div當前放置在屏幕左邊緣和內容左邊緣之間的中間位置，但如果有人正在使用寬屏幕顯示器，則此浮動div與內容相距太遠。

來源

2011-10-27 xbonez

使用jQuery獲取內容的位置，然後應用的位置。 floatingDiv –

我到目前爲止並沒有使用jquery的網站，並不想僅僅爲此。我能否不只是使用Javascript來達到同樣的效果？我試圖做到這一點，但它不起作用：'document.getElementById（'floatingdiv'）。style.left =（screen.width-1000）;' – xbonez

得到它使用JavaScript來的工作：

<script type="text/javascript"> 
    function setFloatingDiv() 
    { 
     document.getElementById('floatdiv').style.left = (screen.width - 1200)/2 + 'px'; 
    } 
    </script> 
<body onload="setFloatingDiv()">

這裏有一個更好的方法去做它，所以它的工作原理，即使沒有最大化窗口：

<script type="text/javascript"> 
function setSidebar() 
{ 
    if (document.getElementById('main_container').offsetLeft > 150) 
     { 
      document.getElementById('floatdiv').style.visibility = 'visible'; 
      document.getElementById('floatdiv').style.left = (document.getElementById('main_container').offsetLeft - 150) + 'px'; 
     }  
     else //not enough space for it. Hide it 
      document.getElementById('floatdiv').style.visibility = 'hidden'; 
} 
</script>

我打電話此功能onload和onresize

來源

2011-10-27 15:22:49 xbonez

從Sitepoint：http://reference.sitepoint.com/css/position

固定值產生真實相對於包含塊初始定位絕對定位的盒（通常在視口）。可以使用頂部，右側，底部和左側的一個或多個屬性指定位置。在打印介質類型中，元素在每個頁面上呈現。

因此，您的div應該放在您的內容容器中，然後確保您在內容容器上有position：relative，因此它可以作爲定位所有子元素的參考。這是相同的位置：絕對。

<div style='position:relative'> 
my main container 
    <div style='position:fixed;top:300px;left:70px;'>this is my fixed element</div> 
</div>

來源

2011-10-27 15:16:40 MorganTiley

我實際上想要浮動div n像素的左側我的內容div的左邊緣，所以它在技術上將在該div之外。 – xbonez

嘗試此操作，但具有負像素值，例如-70px; – MorganTiley

您可以創建另一個包裝，包裝所有你上面談到的元素。

把浮動div的，大包裝的內部

在線演示：http://jsfiddle.net/bitsmix/wfhpb/

另一個演示鏈接：http://noslog.com/1440.html

來源

2011-10-27 15:27:34

從內容位置左浮動div，而不是左頁

回答

相關問題