Question

我试图将一个元素固定在一个容器中，但固定元素似乎是根据屏幕而不是父元素定位自己。

我的代码：

<div class="relative">
  <div class="absolute">
    <div class="fixed"></div>
  </div>
</div>

Css：

.relative{
  position: relative;
  height:800px;
  width: 400px;
  background: #000;
}

.absolute{
  height:60px;
  width: 60px;
  position: absolute;
  top:0;
  right:0;
  background: #ccc;
  -webkit-transform: translateZ(0); 
}

.fixed{
  height:20px;
  width: 20px;
  background: red;
  position: fixed;
  top:0;
  right:0;
}

我希望红色框固定在灰色框内。但是现在当我滚动框时滚动并且仍未固定。

现场直播：http://codepen.io/undefinedtoken/pen/abhgc

Answer 1

问题在于-webkit-transform。

Chrome无法在转化下的元素上呈现position:fixed。

Read here

您可以尝试从transform div中删除.absolute，并在计算父级宽度后将margin-left设置为.fixed div。在你的情况下它是40px。

示例：

.absolute{ height:60px; width: 60px; position: absolute; top:0; right:0; background: #ccc; /* -webkit-transform: translateZ(0); */ } .fixed{ height:20px; width: 20px; background: red; position: fixed; margin-left: 40px; }

<强> JSFiddle DEMO

Answer 2

 height:20px;
 width: 20px;
 background: red;
 position: fixed;
 right:0px;
 /* adjust manually by margin*/
 margin-right: 300px;

read this article

编辑

CSS

    .relative-wrapper {
        background-color:#f00;
        height:500px;
        overflow:scroll;
        width: 220px;
        position: absolute;
        z-index:0;
    }

    .fixed {
      background-color:green;
      width: 180px;
      position: absolute;
      z-index:1;
      margin: 3px 10px 10px;
    }

HTML

   <div class="relative-wrapper">
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
   </div>
   <div class="fixed">
    Overwrite it the content..
   </div>

Answer 3

我认为有一个更好的解决方案，使用flexbox还可以使let固定位置相对于其父级具有神奇作用

.out-container {
  margin-top: 200px;
  width: 100px;
  height: 60px;
  background-color: #ffeb3b;
  position: relative;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  display: inline-flex;
}

.container {
  display: inline-flex;
  background: red;
  flex-direction: row;
  position: relative;
}
.container .inner {
  display: block !important;
  position: fixed;
  width: 200px;
  height: 500px;
  background-color: #00bcd4;
  z-index: 4000 !important;
  color: #FFFFFF;
  margin: 0;
  list-style: none;
  font-size: 1.2rem;
  box-sizing: border-box;
  padding: 15px 15px;
  text-align: left;
  white-space: normal;
  visibility: visible;
}
.container .block {
  background-color: #aeea00;
  border-radius: 3px;
  width: 32px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
  overflow: hidden;
}

<div class="out-container">
	<div class="container">
		<div class="inner">text</div>
		<div class="block"></div>
	</div>
</div>

https://codepen.io/zhenximi/pen/wEmpVB

Answer 4

您确定不希望红色div为position:absolute而不是固定吗？ E.g。

.fixed{
  height:20px;
  width: 20px;
  background: red;
  position: absolute;
  top:0;
  right:0;
}

演示小提琴：http://jsfiddle.net/lparcerisa/osxo8ysw/

来自http://www.w3schools.com/css/css_positioning.asp：

固定定位

具有固定位置的元素相对于浏览器窗口定位。

即使滚动窗口，它也不会移动

固定相对于父容器的位置

4 个答案: