18.Absolute Positioning


#1

If I create a div tag with static position and margin-left:100px, and then create another small div tag within it and give it absolute position with margin-left:10px, will they be situated on the editor as separate or concentric? because as explained, absolute elements are positioned relative to the html if their parent element doesnt have absolute position.
Can someone plz explain?


#2

this:
absolute elements are positioned relative to the html if their parent element doesnt have absolute position.
is true if you use left instead of margin-left, margin-left will just push it 10px to the right


#3

I read a similar topic u answered in another guys question. i got my answer there.


#4

The one with all the bin's? That answer explains the differences much better


#5

Yep, it was an amazing explanation.Hats off to you.


#6

and i don't know everything, look at this bin. the margin-top of the inner box pushes down the outer box, i never understood why, i do know now, from w3c:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin

I think this is particular useful to know. You can counter this problem by separating the boxes with padding or a border. or a overflow: hidden;


#7

i got distracted, i wanted to show you this, to see if you understand what is happening and why, explain to me (i know why, i build), but i just want to see how good your understanding is


#8

I understood the code and its proceedings.
I am explaining it in parts-
for the #one div, its position is relative and has no margin or any other code pertaining to its movement from its usual(static) position so its in the same place it is if it would be static positioned.

for the #two div, it has a margin-top and margin-left of 50px so it has some distance from the #one. Also. since #one has its overflow set to hidden(as you mentioned) their margins don't collapse.

As for the #three div, the position is set to absolute so it doesn't have its position with respect to #two as it has position:static.(note-if it would be margin-top and margin-right it would have moved w.r.t. #two) Rather it moves with respect to #three because it has position set to relative. So it moves according to top and right set to 0px.

Well, how was my understanding? :sweat_smile:


#9

Your understanding is spot on, nicely done!


#10

i still need help with css positioning inline-block
heres the code ive been using

  • {
    border: 1px dashed blue;
    }

div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
/*Add your CSS here!*/

}

one {

background-color: #FF0000;

}

two {

background-color: #0000FF;

}

three {

background-color: #FFD700;

}

four {

background-color: #308014;

}

display div{
inline-block
}

plz tell me wat im doing wrong


#11

general css syntax:

selector { 
  property: value;
  property: value;
}

now, you already have your css selector (div), display is a property, and inline-block a value. This property should be added to your div css selector


#12

it should be like-
div
{
display:inline-block;
}
Thats it!

display is basically used to change the block formatting. in default divs' have block box format. There are 4 types which am sure u learnt here.