固定位置层（div）相对于其父div（具有溢出：自动） [英] Fixed position layer (div) in relation to its parent div (with overflow:auto)

问题描述

我需要将子div设置为固定（position：fixed）与其父div的关系。父div被设置为溢出：auto。

为了让我的观点非常清楚：我不希望孩子div与HTML屏幕相关，但是与父分部有关。父div会滚动，因为它被设置为溢出：auto。它有很多文本，这会导致滚动条出现（不是屏幕滚动条，而是div的）。我需要孩子的div与父div有关的固定位置。

有没有纯粹的HTML + CSS解决方案，还是只能实现通过javascript？

解决方案

我看到你在说什么... 基本上这是问题。使用固定位置时，您可以在滚动时将元素粘贴在那里，但必须仅与窗口有关。如果您尝试使用 position：absolute 来表示它相对于容器的位置，它不会粘贴，但会滚动显示内容...解决方案？ 当然包装！ ：D

基本结构是这样的：
$ b

HTML

 < div class =blah> 
< div class =inner>文字内容< / div> 
< div class =meh>固定内容< / div> 
< / div> 
  

CSS

  div.blah 
 {
 position：relative; 
} 
 
 div.inner 
 {
 width：500px; 
 height：500px; 
溢出：auto; 
} 
 
 div.meh 
 {
 background-color：＃f00; 
位置：绝对; 
 left：20px; 
 bottom：20px; 
} 
  

enjoy：）

I need to set a child div as fixed (position: fixed) in relation to its parent div. The parent div is set as overflow: auto.

Just to make my point very clear: I don't want the child div to be fixed in relation to the HTML screen, but in relation to the parent div. The parent div scrolls, because it is set as overflow: auto. It has a lot of text, which causes the scrollbars to appear (not the screen scrollbars, but the div's). I need the child div to hold a fixed position in relation to its parent div.

Is there a pure HTML+CSS solution for this, or is it only possible to achieve through javascript?

解决方案

I see what you're saying... basically this is the problem. With fixed position you get the element to stick there while you scroll but that has to be relative only to the window. If you try to make it relative to the container with position:absolute, it doesn't stick but scrolls with the content... the solution? a wrapper of course! :D

basic structure is this:

HTML

<div class="blah">
    <div class="inner">text content</div>
    <div class="meh">fixed content</div>
</div>

CSS

div.blah
{
    position:relative;
}

div.inner
{
    width:500px;
    height:500px;
    overflow:auto;
}

div.meh
{
  background-color:#f00;
  position:absolute;
  left:20px;
  bottom:20px;   
}

enjoy :)

这篇关于固定位置层（div）相对于其父div（具有溢出：自动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！