4 Replies - 215 Views - Last Post: 10 September 2019 - 12:03 AM

#1 GabeNL   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 06-September 19

[Nebwie] Understanding position in CSS

Posted 06 September 2019 - 01:46 PM

Working together with my son on his first home work. Excited to see him get into programming at school and they started with some html/css. We've read through some articles about positioning div elements on W3school and freecodecamp.org, but we still don't fully understand how it works.

What I learned from those pages was that by using "position: relative", the element will be relative to its "parent" position. But what is the parent? How can I see the dependency?

For example we're playing with this:
    <div id="blok1" class="base1">
    <p>1</p>
  </div>
    <div id="blok2" class="base1">
    <p>2</p>
  </div>
    <div id="blok3" class="base1">
    <p>3</p>
  </div>
    <div id="blok4" class="base1">
    <p>4</p>
  </div>



and for CSS:
<style>

.base1 {
width: 40px;
height: 40px;
position: relative;
float: left;
color: white;
 }

 
p {
text-align: center;
}


 #blok1 {
   background-color: black;
 	top:0px;
 	left:0px;
 }
 #blok2 { 
    background-color: black;
    top:0px;
    left:0px; 
 }
 #blok3 {
    background-color: black;
 	  top:60px;
 	  left:20px;
 }
#blok4 {
   background-color: black;
   top:0px;
 	left:0px;
 }

</style>



Now, blok3 is moved 60 by 20 pixels. I understand that. If blok3 would be 0 by 0, all four blocks would be needly aligned horizontally. Since they're talking about the "parent" in the tutorials, I would have guessed that blok4, would now also be at top 60 (0 relative from its parent 3) and then sitting immediately next to block3. But now it just doesn't move at all when I play with the positions top and left of blok3. Then why does it leave the gap where blok3 was? Shouldn't blok4 then move against blok2 if blok3 has moved out of the way?

Completely confused :-)

Any help is appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: [Nebwie] Understanding position in CSS

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15300
  • View blog
  • Posts: 61,365
  • Joined: 12-June 08

Re: [Nebwie] Understanding position in CSS

Posted 06 September 2019 - 03:09 PM

Typically, if there is no visible parent, the parent is the 'body' section of the HTML. AKA the entire page.

You can see all sorts of good information if you hit F12 on your browser window. Element tab (with element highlighting on) helps.
Was This Post Helpful? 0
  • +
  • -

#3 GabeNL   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 06-September 19

Re: [Nebwie] Understanding position in CSS

Posted 07 September 2019 - 03:05 AM

I know, but it doesn't explain to me why the 4th blok stays were it is. I don't understand the placing rules it follows.

Also see: Link to CSSDesk
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15300
  • View blog
  • Posts: 61,365
  • Joined: 12-June 08

Re: [Nebwie] Understanding position in CSS

Posted 07 September 2019 - 08:30 AM

It's the way a web browser rendering engine works. That gap between 2 and 4 is just the right size for 3, correct? With relative you move it after it's final position in that line.

https://developer.mo...ive_positioning
Was This Post Helpful? 1
  • +
  • -

#5 GabeNL   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 06-September 19

Re: [Nebwie] Understanding position in CSS

Posted 10 September 2019 - 12:03 AM

View Postmodi123_1, on 07 September 2019 - 08:30 AM, said:

It's the way a web browser rendering engine works. That gap between 2 and 4 is just the right size for 3, correct? With relative you move it after it's final position in that line.

https://developer.mo...ive_positioning


Thank you, that gave me a little more insight to understand how it's working.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1