How to Specify a Div's Position as Absolute and Relative at The Same Time

how to specify a div's position as absolute and relative at the same time

If the child is positioned absolutely, any grandchild can be again positioned absolutely in relation to the child.

That is, the child does not need to have position:relative for the grandchild to be positioned absolutely in relation to it.

So the child could be considered to have position:absolute for it's own positioning but also "relative" as it also forms the reference point for the positioning of the grandchild.

<div class="parent">
  <div class="child">
    <div class="g-child"></div>
  </div>
</div>

.parent {
  width: 350px;
  height: 350px;
  background: rebeccapurple;
  margin: 1em auto;
 position: relative;
}

.child {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 50px;
  top: 50px;
  background: orange;
}

.g-child {
  position: absolute;
  width: 25px;
  height: 25px;
  background: #f00;
  top:125%;
  right: 0;
}

Codepen demo

How to make an element have a position of both relative and absolute?

Provided that the .child is absolutely positioned, any .child-of-child can be absolutely positioned in relation to the .child. This means that the .child does not need to be given position: relative for the .child-of-child to be absolutely positioned with respect to it.

You can confidently use your CSS.

Absolute and relative positioning at the same time in CSS

Here is one approach that involves using a combination of CSS table-cells and absolute positioning.

Create a CSS table as the top level container .main, and define three display: table-row containers .head, .extra and .content.

Within .content, nest a display: table-cell element .wrap and set position: relative. Within .wrap, use absolute positioning to fit a .scroller container that will hold the content.

If you hide the .extra block, the .content will stretch vertically to take up the remaining space.

html, body {    height: 100%;    margin: 0;}.main {     border: 1px dotted gray;    width: 100%;    height: 100%;    box-sizing: border-box;    display: table;    overflow: hidden;}.head {    display: table-row;    height: 50px;    background-color: beige;    }.extra {    display: table-row;    /* display: none; */    height: 100px;    background-color: tan;}.content {    display: table-row;    background-color: lightblue;    height: auto;}.content .wrap {    display: table-cell;    height: auto;    position: relative;}.scroller {    overflow: auto;    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    }

<div class="main">    <div class="head">head</div>    <div class="extra">extra</div>    <div class="content"><div class="wrap"><div class="scroller">        <p>Scrolling div...</p>        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum imperdiet metus ac elementum. Donec viverra porttitor velit, ut eleifend nulla porttitor quis. Donec placerat, leo ac volutpat pellentesque, elit mauris aliquet metus, sit amet dictum enim augue consequat elit. Pellentesque eu diam a sem ornare tristique. Sed sollicitudin elementum nibh, eget tincidunt sem rhoncus at. Morbi cursus ornare dolor, vel tempus leo blandit ut. Donec at dictum eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer faucibus tellus in aliquet accumsan. Nam scelerisque ante eros, et tempus dolor mollis nec. Cras in mauris ac orci hendrerit venenatis. Nunc porta nisi eu odio feugiat, sed fermentum odio posuere. Vivamus luctus dui sit amet lobortis dignissim. Nulla feugiat est lacinia est porta porttitor. </p>        </div>        </div>    </div></div>

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

How to make two divs have the same position?

Append you're child divs in a main container and use CSS position: relative, then use position: absolute to child divs and add visibility to which div should be visible or not.

.controlls {  width: 100%;  position: relative;}
.controll1 {  position: absolute;  left: 0;  top: 0;  width: 50%;  height: 50px;  background: red;}
.controll2 {  position: absolute;  right: 0;  top: 0;  width: 50%;  height: 50px;  background: blue;}

<div class="controlls">  <div class="controll1">    asd1  </div>  <div class="controll2">    asd2  </div></div>

how to use both fixed and relative position property in same page using css?

You can do it two ways:

HTML:

<div id="first">asdfgh</div>
<div id="second">zxcvbn</div>
<div id="third">qwerty</div>

CSS:

html, body
{
    margin: 0;
    padding: 0;
    overflow: auto; /* Ensure this is specified or you need padding-top and not margin-top on #second */
}

#first
{
    position: fixed;
    box-sizing: borderbox; /* You need this if #first have borders */
    background-color: black;
    color: white;
    height: 100px;
    left: 0;
    right: 0;
    z-index: 100; /* This is needed to put the #first in front of other elements */
}

#second
{
    background-color: green;
    height: 500px;
    margin-top: 100px;
}

#third
{
    background-color: yellow;
    height: 200px;
}

HTML:

<div id="demo_wrapper" class="toFixed">
    <div id="wrapped1">asdfgh</div>
    <div id="wrapped2">zxcvbn</div>
    <div id="wrapped3">qwerty</div>
</div>

CSS:

html, body
{
    margin: 0;
    padding: 0;
    overflow: auto; /* Ensure this is specified or you need padding-top and not margin-top on #second */
}

/** Switch from and to fixed with CSS class (JS needed) **/

#demo_wrapper
{
    position: relative;
    overflow: auto;
}

#wrapped1
{
    background: red;
    height: 50px;
}

#wrapped2
{
    background: yellow;
    height: 460px;
}

#wrapped3
{
    background: blue;
    color: white;
    height: 80px;
}

.toFixed>div:first-child
{
    position: fixed;
    width: 100%;
    z-index: 100; /* This is needed to put the #first in front of other elements */
}

.toFixed>div:first-child+div
{
    margin-top: 50px;
}

This is a jsfiddle demo (switch commented part in HTML to see the two options).

---

Related Topics