2 replies [Last post]
Aria Spark
Aria Spark's picture
Offline
newbie
Last seen: 2 years 50 weeks ago
Timezone: GMT+3
Joined: 2016-09-01
Posts: 2
Points: 3

CODEPEN link: http://codepen.io/ariaspark/pen/kXdVbL

I created an absolute-positioned element that is relating to the html element when I set its top and right position. Its ancestor (relative-positioned) element just seems to not exist. I am sure I am missing something simple but honestly have no idea what it is.

I need the blue div element (absolute positioned) placed exactly top: 0; right: 0; over the maroon area of the Fish box (relative-positioned). The Codepen link to visualize what I say its above the post. Any help?

Aria Spark
Aria Spark's picture
Offline
newbie
Last seen: 2 years 50 weeks ago
Timezone: GMT+3
Joined: 2016-09-01
Posts: 2
Points: 3

By the way, this is an image

By the way, this is an image of the result I need!

AttachmentSize
pic.png 12.91 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 45 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Didn't validate?

You have three separate elements with id=box. This is a serious syntax error.

The issue is that the absolute box is not descended from 'box'. You closed the 'box' box before coding the the absolute box.

It should be more like this:

<div id="fishbox">
  <hx>Fish</hx>  <!-- appropriate heading level -->
 
  <div id="absolute-box">
    <p>blah, blah, blah</p>
  </div>
</div>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.