2

I am still new to web so this is kinda tricky for me. I have a class greenApple01

.greenApple01 {
    width: 256px;
    height: 256px;
    background-image: url("fingertwisterimages/newimages/spritesheet_greenApple.png");
    border: 1px solid red;
    position: absolute;
    top: 290px;
    right: 130px;
}

And I have another div yellowApple03.

Now what I want to achieve is this:

enter image description here

How can I position yellowApple03 based on greenApple01's position? Also, I am developing for mobile and can you give me ideas on how to utilize media queries?

Keale
  • 3,924
  • 3
  • 29
  • 46
Jeongbebs
  • 4,100
  • 7
  • 34
  • 60

2 Answers2

4

There will be no chance to position elements relative to each other if they're positioned absolutely as they are removed from normal flow.

If you have planned to align the elements vertically at the middle in the same line, you could simply display them as inline-block and then give vertical-align: middle; declaration to them for vertical alignment.

.greenApple01, .yellowApple03 {
    display: inline-block;
    vertical-align: middle;
}

You could play with margin if you want to add some spaces between those elements. For instance, assuming .yellowApple03 is placed after the .greenApple01:

.yellowApple03 { margin-left: 100px; }

Also mind the gap between inline-block elements which increases the actual space between elements and may causes a trouble.

Community
  • 1
  • 1
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Hi @Hashem Qolami. Thanks. Based on this, can I use this even if I have more elements? I have a total of 8 images that needs positioning. – Jeongbebs Oct 13 '14 at 00:53
  • 1
    @MiguelRivera Of course. Just keep in mind: inline-level elements (`inline`/`inline-block`) sit beside each other like words; If there isn't enough room inside the container, they will wrap. In that cases we usually give `white-space: nowrap` to container and then reset it to `normal` on children if needed so. – Hashem Qolami Oct 13 '14 at 00:57
2

absolute and relative positioning are very powerful and misunderstood concepts in CSS.

http://plnkr.co/edit/nzhONbfFRG17R44EHI5C?p=preview

In a nutshell, if you absolute position something, it will become bounded within the closest parent level element with a position other than default.

Eg 1.

<body>
   <div class='parent'>
       <div class='apple1' style='position:absolute'></div>
       <div class='apple2' style='position:absolute'></div>
   </div>
</body>

In this case the 2 apples will both be positioned relative to the body

Eg 2.

<body>
   <div class='parent' style='position:relative'>
       <div class='apple1' style='position:absolute'></div>
       <div class='apple2' style='position:absolute'></div>
   </div>
</body>

In this case the 2 apples will both be positioned relative to the div with the 'parent' class because it has a position value.

So, to solve what you want to do, just make sure your yellow apple is a child element of your green apple. That way your yellow apple will be positioned in relation to wherever your green apple is being shown.

<body>
    <div class='content'>
        <div class='greenApple01' style='position:absolute'>
            <div class='yellowApple03' style='position:relative'></div>
        </div>
    </div>
</body>
DevVex
  • 143
  • 1
  • 6
  • Tell me if I am wrong, based on example 2. If `apple2` is child of `apple1`, whatever margin I put in `apple2` class, it will be applied starting on `apple1`'s position? – Jeongbebs Oct 13 '14 at 01:16
  • Yes that is correct. Here is a plunker to make things a little clearer. http://plnkr.co/edit/nzhONbfFRG17R44EHI5C?p=preview. In the third example you will notice that all I did was create another green apple the same way and change where it was positioned, as a result, the yellow apple was positioned relative to it in the same way. – DevVex Oct 13 '14 at 01:33