Absolute positioned DIV, inside relative container

Mixing relative positioning and absolute positioning together

How to apply absolute positioning inside relative positioning container element explained in this example. Here the container is a DIV block with relative positioning and an absolutely positioned element (it is also a DIV block) will be placed inside this container DIV.

In this example we have placed a container DIV with Gray background which is relatively positioned and a pink DIV which is actually a child div inside contained div.

This is child div

Code:

<div id="containerDiv">
<div id="childDiv">
This is child div
</div>
</div>

<style type="text/css">
#containerDiv { position:relative; width:300px; height:200px; background-color:#666}
#childDiv { position:absolute; top:30px; right:10px; width:100px; background-color: #C6C }
</style>

Absolutely positioned child div inside container div

Relative positioning has been set on DIV of id=containerDiv, any elements within containerDiv (id=containerDiv) will be positioned relative to containerDiv not with respect to the browser.
The child DIV (id=childDiv) is positioned absolutely within the "containerDiv". So the childDiv which has position:absolute will be placed inside containerDiv, not with respect to the browser.

Then we set childDiv properties as top:30px; right:10px;

So childDiv (id=childDiv)’s top right point will be placed 10px left from the right edge of container div (id=containerDiv) and 30px below the top edge of container div (id=containerDiv)

View HTML code in action | View / download as text file


About SEO : If you are looking for search engine optimization & website ranking in Google search then you may visit this page to know more about the cost packages, specially the search engine optimization & ranking cost for Google.

To learn web designing techniques from the Kolkata based classroom coaching visit www.onlinecomputerteacher.net. Here the tutors in Kolkata, provide coaching on web designing HTML5,CSS3,JavaScript jQuery.


About Mr Choudhury

Mr Choudhury, a professional PHP Website Developer, mobile app & java developer & an expert on HTML5, CSS3, JavaScript, jQuery PHP WordPress. He is a Computer Science Graduate and Masters in Technology in Computer Science. He is highly involved in responsive website designing, mobile app development, Java system development & SEO consultancy for 15 years. Call Mr. Choudhury (+91).9163111390 or visit his website http://www.bikramchoudhury.org