dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Seemingly randomly positioned div

  1. #1
    Join Date
    Oct 2015
    Posts
    15

    Question Seemingly randomly positioned div

    Code:
    <main>
      <div id="bottom">
      </div>
      <div id="c1" class="circle">
      </div>
      <div id="c2" class="circle">
      </div>
    </main>
    
    main {
      text-align:center;
      width: 480px;
      height: 640px;
      background: -webkit-linear-gradient(left,blue,green,orange); 
      overflow: hidden;
      border: 1px solid snow;
      /*position: relative;*/
    }
    
    #bottom {
      display: inline-block;
      position: relative;
      transform: translateY(510px);
      width: 200px;
      height: 200px;
      
        background: radial-gradient(circle,purple,pink);
      border-radius: 40%;
      opacity: 0.7;
    }
    
    .circle {
      background: snow;
      opacity: 0.2;
      border-radius: 50%;
    }
    
    #c1 {
      width: 40px;
      height: 40px;
      /*transform: translateY(200px);*/
      border: 1px solid blue;
    }
    Why is the c1 div not positioned at the top left 0 corner relative to its parent? Why is it positioned in that seemingly random Y position?

  2. #2
    Join Date
    Oct 2013
    Posts
    1,375
    OK this may be a bit difficult to follow but it's my best attempt.

    position: relative;, which is default for all elements, not only places an element relative to its parent but also relative to its siblings. So by virtue of <div id="bottom"> being placed before its siblings in the HTML it is rendered ahead of them on the page. Why doesn't it appear there? Why does the circle appear halfway down the <main> element? Because the space for <div id="bottom"> (roughly 200px of height) has been reserved there. You "translate" that element to the bottom, but the space for it is still at the top. Therefore the circle appears below that space. As a result, the positioning is not "seemingly random"; it's where it should be given the code you post.

    The easiest solution is to move <div id="bottom"> after <div id="c1" class="circle"> in the HTML. That takes care of the relative positioning since <div id="bottom"> is now rendered, and the space reserved for it, is after the circle.

    HTML Code:
    <main>
      <div id="c1" class="circle">
      </div>
      <div id="bottom">
      </div>
      <div id="c2" class="circle">
      </div>
    </main>
    Using your original HTML, if you want a child element to be placed relative to its parent/container but not relative to its siblings you must first specify position: relative; in the parent's CSS rules. Then the child element must be position: absolute; and it's positioning relative to the parent specified.

    Code:
    main {
      [...]
      position: relative;
    }
    
    .circle {
      [...]
      position: absolute;
      top: 0;
      left: 0;
    }
    Now <div class="circle">, and/or any other element with that class, is placed relative to <main> (at the top left corner) but not relative to its sibling elements.

    Confused yet?
    In dog beers I've only had one.

  3. #3
    Join Date
    Oct 2015
    Posts
    15
    Hm yes, the classic 'an absolutely positioned child in a relative container' in CSS.
    I'm not confused, I'm quite used to that practice.

    Thank you for your explanation.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles