Position an Element Relative to Its Container

Position an element relative to its container

You are right that CSS positioning is the way to go. Here's a quick run down:

position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).

However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.

To demonstrate:

#container {  position: relative;  border: 1px solid red;  height: 100px;}
#box { position: absolute; top: 50px; left: 20px;}
<div id="container">  <div id="box">absolute</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

CSS: Positioning a child element relative to its parent using any position property on the parent

The question is:

Could I also achieve this [positioning the p element at the bottom] by using any position declaration(other than
static) for the parent?

Yes

From MDN:

A positioned element is an element whose computed position value is
either relative, absolute, fixed, or sticky. (In other words, it's
anything except static.)

CSS position image relative to right hand side of div

you defined the icon as position: relative. For what you descrived, I understood that you want to position the icon in absolute way, taking provContactSelector as the reference. In this case you should change the css to the following:

.provContactSelector {
position: relative;

.icon {
appearance: none;
background-color: transparent;
position: absolute;
border: none;
right: 50px;
top: 50px; // or whatever the value you need
}
}

Explanation:

position css instruction can be a bit tricky, and I have a lot of people having some confusion with how it works. So I will try to briefly explain what is happening:

  • position: static is the default value of a normal html block, and it positions itself depending of the other blocks that are around it. css like "top, left, right, bottom, z-index" won't work on them.

  • position: fixed an element defined as fixed will ignore all the blocks defined in the page and will position itself using the windows element (the whole document) as reference. you can position it using css like "top, left, right, bottom". You can define if other elements are on top of it or under it using "z-index".

  • position: absolute an element defined as absolute will ignore all the blocks defined in the page and will position itself using its nearest parent that IS NOT position: static as a reference. You can position it using css like "top, left, right, bottom". You can define if other elements are on top of it or under it using "z-index".

  • position: relative can be defined as an hybrid between absolute and static. The element will take in account the blocks that are near itself to find its position in the document. however, you can modify that position using "top, left, right, bottom", but that position will use as a reference the original place the element was located. This type of elements can also use "z-index".

Overall, position relative has properties from "absolute" and "static". I have yet to see a "position: relative" element in where using "top, bottom, left, right" is justified, because makes the element to be less predictable, and you can displace it using padding or margins instead.

Usually, position relative elements are defined not because you can position them with "top, left, right bottom" but because making them relative will let you position elements inside of them with "position: absolute" taking the relative element as reference.

Most of the problems I have found that confuse people is due the name they have: "absolute" looks like you will position the element taking in account only the windows, and "relative" sounds like you are using other element as base. However, the truth is that "absolute" is not absolute at all, it takes is position in relation of other element.

edit: as geeksamu mentions, the "icon" is a class, so it should have a dot before.

Css: Position element by it's bottom relative to it's container's top

You could make use of transform: translateY(-100%), to make the bottom of the element relative when you apply margin-top: 100px to h1.

#container {  width: 200px;  height: 200px;  background: tan;  overflow: hidden;}#container h1 {  transform: translateY(-100%);  margin-top: 100px;  background: papayawhip}
<div id="container">  <h1>Some Text<br/>more...</h1></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.

Absolute position relative to a container that is also responsive

Simply use relative positioning at lower resolutions. Using absolute will break your layout because the element is removed from the regular flow and therefore doesn't affect other elements around it.

With minor other modifications:

html { background-color: #1394cb; }
.col-8-12 { width: 66.66666667%; }
.offset-2 { margin-left: 16.66666667%; }
section { float: left; margin-top: 250px; ; position: relative; }
section > div {background: #0d2c41; padding: 10px 0;}
nav.to-do-list { position: absolute; left: -177px; top: 0; background-color: #FFF; max-width: 180px; }
div>h1, div>p { color: #FFF; padding-left: 15px; }

ul>li { list-style: none; margin-right: 30px; }

@media only screen and (max-width: 992px){
.col-8-12 { width: 100%; }
.offset-2 { margin-left: 0; }
nav.to-do-list { position: relative; left: 0; min-height: 50px; display: inline-block; max-width: none; width: 95%; margin-left: 2.5%; }
ul>li { display: inline-block; }
}

Get position/offset of element relative to a parent container?

element.offsetLeft and element.offsetTop give an element's position with respect to its offsetParent (which is the nearest parent element with a position of relative or absolute.)

Relative position causing problem my container go under the showcase Why It's happening?

To prevent overlapping of showcase on container, add position: relative; to .container.

And if you want conatiner not to overlap with .relative, then just just add height: 100vh; in .relative.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
min-height: 100vh;
}

a {
color: #000;
text-decoration: none;
}

.container {
max-width: 1200px;
width: 80%;
position: relative;
background: red;
margin: auto;
}

.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}

.lead {
font-size: 1.8rem;
font-weight: 300;
}

.relative {
position: relative;
}

nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}

nav>a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}

nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}

nav ul a:hover {
background: rgba(0, 0, 0, 0.6);
}

.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover, rgba(0, 0, 0, 0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div>
<div class="relative">
<nav>
<a href="#"><img height="70" src="img/logo.png" alt="Logo">  Title</a>
<ul>
<a href="#">Home</a>
<a href="#">Login</a>
<a href="#">SignUp</a>
<a href="#">Dashboard</a>
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>

<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</div>


Related Topics



Leave a reply



Submit