- This topic is empty.
-
AuthorPosts
-
June 13, 2013 at 3:40 pm #45517
Nishant
ParticipantYes, I know theory about these. i have been read about it at this site and at many other sites but the the concept is not so clear. i want to know that How the position works in css. In many ‘CODEPEN’ i had change position value to know that how it really work but all result was unpredictable .
I am learning and practicing CSS very hard but i am upset now because of it. i have been read about ‘position’ at more than 20 sites and every time i think now it’s clear but when practicing, got stuck that when to use ‘absolute’ and when ‘relative’.June 13, 2013 at 3:42 pm #138634June 13, 2013 at 4:33 pm #138638Nishant
ParticipantThanks for your suggestion. Great help :)
June 13, 2013 at 4:37 pm #138639Senff
ParticipantElement with relative position: if it has TOP, BOTTOM, LEFT and/or RIGHT values, then its position will be shifted that much from it’s original position. Example: if it has
top:-10px
, it will be placed 10 pixels higher compared to its original position. Or, if it hasleft:20px
, it will be moved 20 pixels to the right.Element with absolute position: will be positioned with the coordinates it has been given (TOP, BOTTOM, LEFT and/or RIGHT), with the zero point being in the top left corner of the nearest parent that has position relative. Example, if it has
left:0; top:0;
, it will be placed at the top left of the nearest relative parent.These are the basics that keep me sane about this, hope it helps you.
June 13, 2013 at 4:40 pm #138640posterity576
ParticipantI don’t know whether Chris explains this bit in the video @Paulie_D posted, but because (as you will learn) absolutely positioned elements are no longer part of the document flow, it is important to set a z-index when you want to interact (_e.g._, click an anchor link, add hover effects to different elements, etc.) with those elements. For this reason, I would also suggest learning about the CSS property z-index (if, of course, you don’t know about it already).
June 13, 2013 at 5:04 pm #138642TheDoc
Member@posterity576 that’s only true in certain situations. You can have absolutely positioned elements without even needing to *think* about z-index.
June 13, 2013 at 5:15 pm #138643posterity576
Participant@TheDoc In the cases I’ve run across, when you need to _interact_ with those elements, a z-index is always required. I agree, however, that when your absolutely positioned elements are solely for design purposes, _thinking_ about z-index isn’t necessary.
Regardless, there _will_ be instances when @bhaktanishant needs to use z-index, and so it will be important to know what z-index is, its function, and to what situation it could apply, such as interacting with AP page elements.
June 14, 2013 at 6:01 am #138690Nishant
ParticipantThanks to all of you.
I created a [PEN](http://codepen.io/anon/pen/quaKr “”) to understand position and have some questions.1: ‘**absolute1**’ box and ‘**relative1**’ box both have defined with ‘**top: 30px**’ but ‘**relative1**’ box scaling 30px from border of body and ‘**absolute1**’ box scaling 30px from up above the border why ?
2: when ‘**relative1**’ is defined with **top:30px** then some part of it get behind ‘**relative2**’ so have i scale ‘**relative2**’ same as ‘**relative1**’ every time i scale ‘**relative1**’.
3: How to set ‘**relative1**’ and ‘**relative2**’ so that when scaling ‘**relative1**’, ‘**relative2**’ automatically scale with ‘**relative1**’ ? (will i have to set margin-bottom for ‘**relative1’** for this ?)
4: Half of ‘**absolute2**’ is below border so how to set ‘body’ that always all elements float in ‘body’ ?
5: Last but very important question, when and why use ‘**relative** position’, because i think ‘**absolute** position’ can do everything that ‘**relative**’ does ?
June 14, 2013 at 3:32 pm #138738__
Participant**1**. As @Senff mentioned above, `relative` positions an element with reference to its “natural” (i.e., where it would appear _without_ any styling) position, whereas `absolute` positions it with reference to the [closest non-statically positioned] parent element.
Because your `
` element has padding, `#relative1` would normally be 20px from the top edge of the body – plus `top:30px` makes 50px. `#absolute1` ignores where it would “normally be,” and so is exactly 30px from the top of the body.**2.** I don’t understand what you mean by “scale” in this context.
**3.** Same question.
**4.** If by “**float** in body” you mean “**completely contained inside** the body,” then you’ll simply need to pay attention to how big your elements are and how much space they have available.
_([`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float) means something else entirely.)_
In this instance, your body is 260px* tall. Your `#absolute2` is 100px tall, which leaves you with 160px before it overlaps the bottom of the body. Because you positioned it with `top: 180px`, it overlaps the bottom border by 20px.
* _observe: when you remove the positioning, [you can see where your relative elements would appear “normally.”](http://codepen.io/anon/pen/cqJnu) Each `#relative…` div is 100px tall, plus your `
` element works out to be 20px tall. Your `` has 20px top and bottom for padding._ _100 + 100 + 20 + 20 + 20 = 260._
**5.** There are other differences, but I think these answers clearly demonstrate that `absolute` cannot “do everything `relative` does,” and vice-versa.
June 14, 2013 at 5:23 pm #138755posterity576
ParticipantI agree with everything @Senff and @traq said and will just add (for reasons of clarity) that if position: relative has not been defined for any page element, then the parent of the absolutely positioned element or elements will be the top-most page element (_i.e._, html).
Take the bottom bit of code as a simple example:
The HTML:
This is a small chunk of text
The CSS:
.content {
width: 70%;
background-color: #BADA55;
}span {
background-color: #facade;
position: absolute;
left: 0;
top: 0;
}If you were to render the top bit of markup and CSS in a browser, you will notice that the span appears at the top-most and left-most part of the viewport. If, however, you want the span to appear at the top left of the div, simply give the div a position of relative, like so:
.content {
width: 70%;
background-color: #BADA55;
position: relative; /*assigning position: relative here makes this div the parent*/
}It should be clear from the above that assigning a position: relative to the .content div forces it to be the parent of the span. Instead of appearing at the top-most and left-most part of the screen, the span will appear only at the top left of the div.
Cheers!
June 15, 2013 at 2:03 am #138801Nishant
ParticipantThanks for this great information.
[@posterity576](https://css-tricks.com/forums/profile/36669/posterity576 “”) and [@traq](https://css-tricks.com/forums/profile/traq “”) you both just cleared my concept very well.
From where will i get this type of information to get my concept clear. i never found this on any site neither on ‘css-tricks’, they all have only basic theory.
Thanks again////
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.