CODEWITHSUNDEEP
htmlcss
undefinedtoken
undefinedtoken

Reputation: 931

Fixed position relative to parent container

Im trying keep an element fixed within a container but the fixed element seems to be positioning itself according to the screen but not the parent element.

My code :

<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;
}

I want the red box to be fixed inside the grey box . but now when i scroll the box scrolls and doesnt remains fixed.

See it live : http://codepen.io/undefinedtoken/pen/abhgc

Upvotes: 2

Views: 8830

Answers (4)

Zhenxi
Zhenxi

Reputation: 11

There is a better solution I think, using flexbox also can make the magic of let fixed position in relative to it's parent

.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

Upvotes: 1

Punitha Subramani
Punitha Subramani

Reputation: 1477

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

read this article

edited

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>

Upvotes: 1

aniskhan001
aniskhan001

Reputation: 8511

The problem here is with the -webkit-transform.

Chrome cannot render position:fixed on elements under a transformation.

Read here

You can try removing the transform from .absolute div and set a margin-left to the .fixed div after calculating it's parents width. in your case it's 40px.

Example:

.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

Upvotes: 5

lpg
lpg

Reputation: 4937

Are you sure you don't want the red div to be position:absolute instead of fixed? E.g.

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

Demo fiddle: http://jsfiddle.net/lparcerisa/osxo8ysw/

From http://www.w3schools.com/css/css_positioning.asp :

Fixed Positioning

An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled

Upvotes: 0

Related Questions