CSS 混合浮动和固定定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4751273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mixing floating and fixed positioning
提问by Pragmateek
here is a standard use of floatand fixed:
这是float和fixed的标准用法：
<html>
<head>
<style type="text/css">
#bigDiv
{
background-color: red;
height: 2000px;
width: 100px;
float: left;
}
#littleDiv
{
background-color: green;
height: 400px;
width: 200px;
float: left;
}
#littleDivFixed
{
background-color: blue;
height: 100px;
width: 200px;
position: fixed;
}
</style>
</head>
<body>
<div id="bigDiv">
</div>
<div id="littleDiv">
</div>
<div id="littleDivFixed">
</div>
</body>
</html>
_
_
- the "littleDiv" div is on the right of the "bigDiv" div but does not follow the scrolling,
- the "littleDivFixed" div, on the contrary, scrolls but is not well positioned relatively to the "bigDiv" div (it is always stuck at the left of the display).
- “littleDiv” div 位于“bigDiv” div 的右侧，但不跟随滚动，
- 相反，“littleDivFixed” div 滚动但相对于“bigDiv” div 的位置不是很好（它总是卡在显示器的左侧）。
_
_
Is it possible to have a div that mixes the two behaviours :
是否有可能有一个混合两种行为的 div：
- always on the right of the "bigDiv" div(at a constant distance of 10px),
- always on the display(at a constant distance of 10px from the top) ?
- 始终在“bigDiv”div 的右侧（以 10 像素的恒定距离），
- 始终在显示屏上（与顶部保持 10像素的恒定距离）？
_
_
Thanks in advance for your help.
在此先感谢您的帮助。
采纳答案by harpo
Can you change the structure of the markup?
你能改变标记的结构吗？
I got the behavior you described (in Firefox 3.6) by making two changes:
我通过进行两项更改获得了您描述的行为（在 Firefox 3.6 中）：
Nest littleDivFixed inside of littleDiv
嵌套 littleDiv 固定在 littleDiv 内
So instead of
所以代替
<div id="littleDiv">
</div>
<div id="littleDivFixed">
</div>
you have
你有
<div id="littleDiv">
<div id="littleDivFixed">
</div>
</div>
Add a margin to the fixed div
给固定的 div 添加一个边距
margin-left: 10px;
Setting margininstead of leftlets you keep the "auto" left positioning, while still making relative adjustments.
设置margin而不是left让您保持“自动”左定位，同时仍然进行相对调整。
回答by josh.trow
Like this? Just add a leftand topattribute to the fixeddiv
像这样？只需向div添加一个leftandtop属性fixed
Ok, this works in Chrome and IE8 (make sure it's standards mode, not quirks), but for some reason not in jsFiddle. I'm not sure why, but it does what you want (I think). If you want to be sure it is always 10px right in case the divs get resized, you could add an onResize listener to bigDiv to re-call the positFix function.
好的，这适用于 Chrome 和 IE8（确保它是标准模式，而不是怪癖），但由于某种原因不适用于 jsFiddle。我不知道为什么，但它做你想要的（我认为）。如果您想确保在 div 调整大小的情况下它始终为 10px，您可以向 bigDiv 添加一个 onResize 侦听器以重新调用 positFix 函数。
<html>
<head>
<style>
#bigDiv {
border: 1px solid red;
height: 2000px;
width: 100px;
float: left;
}
#littleDiv {
border: 1px solid green;
height: 400px;
width: 200px;
float: left;
}
#littleDivFixed {
border: 1px solid blue;
height: 100px;
width: 200px;
top: 10px;
position: fixed;
}
</style>
<script type="text/javascript">
function $(elem) {
return document.getElementById(elem);
}
function positFix() {
$('littleDivFixed').style.left = $('bigDiv').offsetWidth + 10;
}
</script>
</head>
<body>
<div id="bigDiv">
</div>
<div id="littleDiv">
</div>
<div id="littleDivFixed">
</div>
<script type="text/javascript">
positFix();
</script>
</body>
</html>
