How do you put absolute position text in a div?

HTML & CSS
1

How do you put absolute position text within a DIV?

Thanks

2

When something is absolutely positioned and you want it within a parent element, you must realize something. Absolute positioned items base their positioning based off a parent which also has positioning. If you give the parent div position:relative, the absolute positioned text will stay inside of the div.

Although I question why you need to absolute position text in the first place :smile:

3

For position:relative making the absolute positioned text stay inside the DIV do you have any code I could use for that?

Thanks

4

Well let’s assume your structure is like this (you haven’t provided your code so I’m just going to create an example)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
    <div style="position:relative;margin-top:300px;height:200px;background:green;border:1px solid red;">
<p style="position:absolute;border:1px solid blue;">text is here</p>
</div>
</body>
</html>

Things to note - without a height set on the parent (or other static content) the parent will have no height. It doesn’t recognize absolute content since it’s taken from the flow.

Without coordinates set in my example you COULD remove the position:relative since the browser will guess where to place the element. However that’s very dangerous and the positioning is open to interpretation which is often wrong by some browsers. So in my above example please add in top:0;left:0; to the <p>. You will see it in the top left corner of the red box. Now remove the position:relative. Now the absolute content is basing the coordinates off the <body> since it has no positioned parent to base off of. Do you fully understand it?

5

Yes I understand its working.

Thanks

6

Glad I could be of help :smile:. I still question whether you should be using position:absolute, but as long as it is sufficient for you…