修复了相对父 div 内的定位 div

Question

我目前正在构建一个响应式网站，需要修复一个菜单，因此当网站的其余部分滚动时不会滚动。问题是它是一个流体布局，我希望“固定定位”菜单项相对于包含的父元素而不是浏览器窗口是固定的。无论如何这可以做到吗？

Answer 1

这个问题首先出现在谷歌上，虽然是一个老问题，所以我发布了我找到的工作答案，这对其他人来说可能有用。

这需要 3 个 div，包括固定 div。

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.wrapper { position:relative; width:1280px; }
    .parent { position:absolute; }
        .child { position:fixed; width:960px; }

Answer 2

加文，

你遇到的问题是对定位的误解。如果您希望它相对于父级“固定”，那么您确实希望您的 #fixed 为 position:absolute ，这将更新其相对于父级的位置。

这个问题完整地描述了定位类型以及如何有效地使用它们。

总之，你的 CSS 应该是

#wrap{ 
    position:relative;
}
#fixed{ 
    position:absolute;
    top:30px;
    left:40px;
}

Answer 3

在父元素上尝试 position:sticky; 。

Answer 4

一个不涉及诉诸 JavaScript 并且不会破坏 CSS 转换的简单解决方案是简单地使用一个非滚动元素，其大小与滚动元素相同，绝对定位在其上。

基本的 HTML 结构是

CSS

<style>
    .parent-to-position-by {
        position: relative;
        top: 40px; /* just to show it's relative positioned */
    }
    .scrolling-contents {
        display: inline-block;
        width: 100%;
        height: 200px;
        line-height: 20px;
        white-space: nowrap;
        background-color: #CCC;
        overflow: scroll;
    }
    .fixed-elements {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
    }
    .fixed {
        position: absolute; /* effectively fixed */
        top: 20px;
        left: 20px;
        background-color: #F00;
        width: 200px;
        height: 20px;
    }
</style>

HTML

<div class="parent-to-position-by">
    <div class="fixed-elements">
        <div class="fixed">
            I am "fixed positioned"
        </div>
    </div>
    <div class="scrolling-contents">
        Lots of contents which may be scrolled.
    </div>
</div>

• parent-to-position-by 是相对于位置的 div相对于固定的东西。
• scrolling-contents 将跨越此 div 的大小并包含其主要内容
• fixed-elements 只是一个绝对定位的 div< /code> 跨越 scrolling-contents div 顶部的相同空间。
• 通过使用 fixed 类对 div 进行绝对定位，它可以达到与相对于父 div 固定位置相同的效果。 （或滚动内容，因为它们跨越整个空间）

这是一个带有工作示例的 js-fiddle

Answer 5

如果您使用边距而不是位置移动固定的

，这是可能的：

#wrap{ position:absolute;left:100px;top:100px; }
#fixed{ 
   position:fixed;
   width:10px;
   height:10px;
   background-color:#333;
   margin-left:200px;
   margin-top:200px;
}

并且此 HTML：

<div id="wrap">
   <div id="fixed"></div>
</div>

使用此 jsfiddle.

Answer 6

您可以做的一个简单的事情是使用 % 值相对于页面的其余部分定位您的固定 DIV。

看看这个 jsfiddle ，其中固定的 DIV 是侧边栏。

div#wrapper {
    margin: auto;
    width: 80%;
}

div#main {
    width: 60%;
}

div#sidebar {
    position: fixed;
    width: 30%;
    left: 60%;
}

下面的简短图片描述了上面的布局：

Answer 7

这是一个更通用的解决方案，不依赖于菜单/标题高度。
其完全响应式的纯 CSS 解决方案，在 IE8+、Firefox、Chrome、Safari、opera 上运行良好。
支持内容滚动而不影响菜单/标题。

使用 工作小提琴 进行测试

HTML：

<div class="Container">
    <div class="First">
        <p>The First div height is not fixed</p>
        <p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, using Pure CSS 2.1 only</p>
    </div>
    <div class="Second">
        <div class="Wrapper">
            <div class="Centered">
                <p>The Second div should always span the available Container space.</p>
                <p>This content is vertically Centered.</p>
            </div>
        </div>
    </div>
</div>

CSS：

*
{
    margin: 0;
    padding: 0;
}

html, body, .Container
{
    height: 100%;
}

    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }

.First
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}

.Second
{
    position: relative;
    z-index: 1;
    /*for demonstration only*/
    background-color: #6ea364;
}

    .Second:after
    {
        content: '';
        clear: both;
        display: block;
    }

/*This part his relevant only for Vertically centering*/
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}
    .Wrapper:before
    {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

.Centered
{
    display: inline-block;
    vertical-align: middle;
}

Answer 8

您可以使用绝对定位来修复包装器。
并给内部 div 一个固定位置。

.wrapper{
 position:absolute;
 left:10%;// or some valve in px
 top:10%; // or some valve in px
 }

和
div 里面

.wrapper .fixed-element{ 
position:fixed;
width:100%;
height:100%;
margin-left:auto; // to center this div inside at center give auto margin
margin-right:auto;
}

试试这个它可能对你有用

Answer 9

样品溶液。检查一下，这是否是您所需要的。

<div class="container">
   <div class="relative">      
      <div class="absolute"></div>      
      <div class="content">
        <p>
          Content here
        </p>
      </div>
    </div>
 </div>

对于 CSS，

.relative { 
  position: relative;
}

.absolute {
  position: absolute;
  top: 15px;
  left: 25px;   
}

请在 codepen https://codepen.io/FelySpring/pen/jXENXY 上查看

Answer 10

只是将位置从固定更改为粘性

position: sticky

Answer 11

如果您希望其中一个 div 看起来是固定的，而另一个同级 div 可滚动到父 div（如侧面导航栏和内容区域），这里是实现它的一种方法。

<div class="parent__div">
   <div class="fixed__div">

   </div>
   <div class="non__fixed-scrollable-div">

   </div>
</div>

.parent__div {
  display: grid;
  grid-template-columns: 1fr 10fr;
  overflow-y: hidden;
  height: 100vh;
}

.fixed__div {
  background: white;
  height: 100vh;
  overflow-y: auto;
}
.non__fixed-scrollable-div{
  height: 100vh;
  overflow-y: auto;
}