CODEWITHSUNDEEP
htmlcsscss-position
Curtis Bracher
Curtis Bracher

Reputation: 23

CSS relative positioning height to relative parent

Trying to get a number of "buttons" to move with a dynamic background image. So far, the background image does resize. Relative positioning the many buttons (which contain a tooltip and link) works too.... partially...moving them a relative percentage left to right, but not top to bottom. Vertically, the buttons just stack and stay in that position. The goal is to get the buttons to stay close to the same spot on the image no matter what size it is. What am I missing? Am I not understanding the parent/child flow? Coding it wrong?

CSS ---

html {
background: url(img/tundrabiome.jpg) no-repeat center center fixed;
background-size: cover;
}


body {
font-family: helvetica, "times new roman", sans-serif;
font-size: 12px;
width:100%;
height: 100%;
}

#titleBtn {position: relative; top: 30%; left: 34%; background: url(img/tundratitle.png) no-repeat; width:379px; height:127px;}

#bearBtn {display: inline-block; position: relative; top: 65%; left: 24%; background: url(img/bearBtn.png) no-repeat; width:200px; height:200px;}

Html

<html>
 <body>


 <a href="#" class="tooltip">
 <div id="titleBtn">
  <span style="margin-top:120px; margin-left:30px">
    <strong>Tundra Biome</strong><br />
    Lots of really cold information of life in an arctic tundra.  Lots of really cold  information of life in an arctic tundra.  Lots of really cold information of life in an arctic  tundra.
  </span>
  </div>
 </a>


 <a href="#" class="tooltip">
  <div id="bearBtn">
    <span style="margin-top:-30px; margin-left:-50px">
      <strong>Bear</strong><br />
    This is a really cute bear, isn't it?
    </span>
    </div>
 </a>

Can I actually have the "buttons" be relative to a background image (and keep the tooltips and links on the buttons?) or do I have to go back to an absolute position for everything?

Upvotes: 2

Views: 1508

Answers (1)

johntrandall
johntrandall

Reputation: 204

Is there a reason to -not- use absolute positioning?

You don't need absolute position for everything, but you might consider using absolute positioning for the buttons themselves.

'Absolute' is poorly named...When an item is set to absolute, it will be absolutely positioned relative to its closest parent that has the "position" property specified. Set the parent of the buttons to 'static', and then set the buttons 'absolute', relative to that 'static' parent. It is a bit confusing, because the parent is 'static' by default, but actually specifying it as 'static' makes it possible to anchor it's children to it with 'absolute'. (You could also set the parent as 'relative' or 'absolute'. As long as you set it to -something-, it becomes the thing that the 'absolute' children are anchored to.)

Upvotes: 1

Related Questions