Question

在我的网页中，即使用户滚动，我也会在左侧保持静态。

这是div的CSS：

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

如您所见，我将div相对于页面的左上角定位。

但是，我的主要内容只有1000px宽，我想从我的内容的左边缘而不是屏幕的左边缘定位这个div。在1440x900的分辨率下，div当前正好位于屏幕左边缘和内容左边缘的中间位置，但如果有人使用的是宽屏显示器，则此浮动div距离内容相当远。

Answer 1

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

固定值会生成一个绝对定位的框，该框相对于初始包含块（通常是视口）定位。可以使用top，right，bottom中的一个或多个属性指定位置，走了。在打印介质类型中，元素在每个页面上呈现。

所以你的div应该进入你的内容容器，然后确保你在内容容器上有position：relative，这样它就可以作为所有子元素定位的参考。这与position：absolute。

相同

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

Answer 2

通过使用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

Answer 3

你可以创建另一个包装器，包装你上面谈到的所有元素。

将浮动div放在大包装器中

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

另一个演示链接：http://noslog.com/1440.html

从内容中左侧浮动div而不是页面左侧

3 个答案: