11 Replies Latest reply on Dec 20, 2011 1:43 PM by jyeager11

    Trying to position an <a> tag relatively to its wrapping div...

    jyeager11 Level 1

      Please look at the following sample code, displaying two captions each containing an image being displayed via <a> tag background :

       

      <div id="caption1">

        <a href="#" style="position:absolute; display:block; width:100px; height:100px;

          background:url(image1.png) no-repeat top left;

          margin:20px 0 0 200px"> </a>

      </div>

       

      <div id="caption2">

        <a href="#" style="position:absolute; display:block; width:100px; height:100px;

          background:url(image2.png) no-repeat top left;

          margin:20px 0 0 200px"> </a>

      </div>

       

      Because the default position is static, the absolute positioning of the <a> tags takes them right out of the caption divs, and positions them (via margin tags) according to the viewport. As a result, the two <a> tags will overlap, and end up at the exact same position (25px from the top, 200px from the left).

       

      If I add "position:relative" to the caption1 and caption2 divs, the <a> tags become relative to those divs. So if I move those divs down, the <a> tags will follow downwards, which is great. Except that because the <a> tags are absolutely positioned, they don't count against the dimensions of the caption divs. The caption divs, for all intents and purposes, are empty. So they're only 1 line tall. They won't wrap around absolute-ly positioned elements because it doesn't know they're there.

       

      Specifying the positioning for the <a> tags as "relative" instead of "absolute" tells the caption div to take those elements into account and wrap around them, but then I can't position them the way I want (I need them to overlap in some areas).

       

      Here's what I'm trying to do, but can't see to do :

       

      • I want to be able to position block <a> tags with specific height/widths that display nothing but background images, and position them according to the wrapping div -- not the viewport.
      • I want the wrapping div to know exactly how much room the <a> tag is taking height-wise without my having to specify. So that if this div has a border, it won't touch the contained image (displayed via <a> tag background).

       

      What exactly do I need to set my "caption" divs and <a> tags to positioning-wise to achieve this?

       

      Thanks.