Html 绝对定位和固定定位在一起
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21190674/
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
Absolute and fixed positioning together
提问by Manolo
As you can see in this page: http://pitchfork.com/, there are some audio elements on the right side. I've inspected them and they seem to have absolute positioning. But if you scroll down, you'll see that they are fixed.
正如您在此页面中看到的：http: //pitchfork.com/，右侧有一些音频元素。我检查过它们，它们似乎具有绝对定位。但是如果你向下滚动，你会看到它们是固定的。
How can achieve this behavior? Can be an element Absolute and Fixed positioned?
如何实现这种行为？可以是绝对和固定元素定位吗？
采纳答案by Manolo
This is the only way I've found: like @DreamTek said:
这是我找到的唯一方法：就像@DreamTek 所说：
<div id="relative-layer">
<div id="fixed-layer">
</div>
</div>
and in the styles file:
并在样式文件中：
#relative-layer {
position:relative;
}
#fixed-layer {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
because using topand rightrules positions the layer relative to the window, but if using margin-topand margin-leftit is positioned relative to the parent layer.
因为使用top和right规则相对于窗口定位层，但如果使用margin-top和margin-left它相对于父层定位。
JSFIDDLE: http://jsfiddle.net/9HQ4b/1/
JSFIDDLE：http: //jsfiddle.net/9HQ4b/1/
回答by DreamTeK
Create a cool fixed scrolling sidebar with no javascript and a few lines of css.
创建一个很酷的固定滚动侧边栏，没有 javascript 和几行 css。
Fixed vertical div with flexible horizontal positioning.
固定垂直 div，具有灵活的水平定位。
The fixed div in the fiddle below appears to be positioned relative to the container but this is just an illusion.
下面小提琴中的固定 div 似乎是相对于容器定位的，但这只是一种错觉。
FIXEDDIVS ARE ALWAYS POSITIONED RELATIVE TO THE SCREEN.
固定的DIVS 总是相对于屏幕定位。
ABSOLUTEDIVS ALWAYS APPEAR RELATIVE TO THEIR NEAREST 'POSITION:RELATIVE' CONTAINER.
绝对DIVS 总是相对于它们最近的“位置：相对”容器出现。
HTML
HTML
<div class="Wrap">WRAP</div>
<div class="Fixed">FIXED</div>
CSS
CSS
.Wrap{
background:#ccc;
width:600px;
height:300px;
margin:0 auto;
}
.Fixed{
position:fixed;
top:20px;
right:50%; /* this is the trick to make the fixed div appear absolute */
background:#333;
height:100px;
width:50px;
margin-right:-360px; /*Must be half of container width plus desired positioning*/
}
The illusion of a div that appears both absolute and fixed at the same time is acheived by using a negative margin and a fixed width container.
通过使用负边距和固定宽度容器来实现同时出现绝对和固定 div 的错觉。
Small site version for smaller width screens.
适用于较小宽度屏幕的小型站点版本。
回答by Minister
Well, the inspected element IS absolute positioned, but is placed inside a wrapper (in another parent element) - #player-modal, which is fixed positioned!
好吧，被检查的元素是绝对定位的，但被放置在一个包装器内（在另一个父元素中） - #player-modal，它是固定定位的！
The absolute position is used inside the fixed positioned parent, so the .hud element to be just a few pixels outside the content area (same spacing in every resolution!). This way the floating is fixed to the content area, instead of depending on the resolution (using fixed positioning + using the "right: 20px;" setting).
绝对位置在固定定位的父级内部使用，因此 .hud 元素仅位于内容区域外的几个像素（每个分辨率的间距相同！）。这样浮动就固定在内容区域，而不是取决于分辨率（使用固定定位 + 使用“right: 20px;”设置）。
I just forgot to mention that it's possible, because the site has fixed width and not responsive layout, adjusting to every resolution. If you plan to use this efect on site with fixed width - it will work, otherwise you could need another solution.
我只是忘了提及这是可能的，因为该站点具有固定宽度而不是响应式布局，可根据每种分辨率进行调整。如果您打算在现场以固定宽度使用此效果 - 它会起作用，否则您可能需要其他解决方案。
I hope I've explained it well! :-)
我希望我已经解释得很好！:-)
回答by Jeremy Knight
You can also use calc()to achieve this. (supported in IE9+):
您也可以使用它calc()来实现这一点。（支持 IE9+）：
.fixed {
position: fixed;
right: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
or if you want your fixed div on the left, for instance:
或者如果你想要左边的固定 div，例如：
.fixed {
position: fixed;
left: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
