Fixed Position Div Inside Div Container

Fixed position but relative to container

Short answer: no. (It is now possible with CSS transform. See the edit below)

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

Fixed Positioned Div Inside another Div

Then you don't want fixed positioning, but absolute positioning.

Set position: absolute; on the element that you want to position. Set position: relative; on the centered div so that it becomes a layer that you can position elements inside.

center a div inside a fixed one at the center of the screen

There are two ways you can achieve this. One is to give your #center div a fixed position:

#center {
position:fixed; /* change this to fixed */
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
background:#fff;
}

However, this will keep it centered to the screen and not the page.

If you want to center it vertically and horizontally on the web page, one option is to use flex:

#container {  display: flex;  /* establish flex container */  flex-direction: column;  /* make main-axis vertical */  justify-content: center;  /* align items vertically, in this case */  align-items: center;  /* align items horizontally, in this case */  height: 500px;  /* for demo purposes */  border: 1px solid black;  /* for demo purposes */  background-color: #eee;  /* for demo purposes */}
.box { width: 300px; margin: 5px; text-align: center;}
#center { background: #fff; width:100px; height:100px;}
<div id="container">  <!-- flex container -->
<div id="center" class="box"> how to center this div? </div>
</div>

Can I position an element fixed relative to parent?

Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.


To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element.

For example:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.


To position an element "fixed" relative to the window, you want position:fixed, and can use top:, left:, right:, and bottom: to position as you see fit.

For example:

#yourDiv { position:fixed; bottom:40px; right:40px; }

This will position yourDiv fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.

How to right align fixed position div inside a div

You could use a container div:

<div class="outer">
<div class="floatcontainer">
<div class="inner">some text here</div>
</div>
</div>

Then use that to handle the float, and make its child position: fixed

.outer {
width:50%;
height:600px;
background-color:red;
margin:0 auto;
position: relative;
}
.floatcontainer {
float: right;
}
.inner {
border:1px solid white;
position:fixed;
}
.floatcontainer, .inner{
width: 50px;
}

Sticky div inside fixed positioned div

Try introducing a wrapper div around the tag - this way you can separate the positioning logic on the wrapper, and set the tag to position: fixed; for stickiness. Note that position: fixed; by itself on the tag will pull it out of its normal dom flow, so you need to adjust its positioning.

HTML

<div class="tag-wrapper">
<div class="tag">Click here to Refresh</div>
</div>

CSS

.tag-wrapper {
position: absolute;
top: 0px;
left: 80px;
}

.tag {
position: fixed;
background: #ffcc33;
border: 2px solid #dfa800;
border-top: 0px;
padding: 3px 5px;
}

click to see fiddle



Related Topics



Leave a reply



Submit