Fix Position of a DIV relative to another DIV

Priya

Participant

936 Points

28 Posts

I'm trying to fix position of a div with respect to a parent div as:

<div id="one">    
   Some Text!Some Text! Some Text! Some Text! Some Text!Some  Text!Some  Text! Some Text! Text! Text! Some Text! Some Text!
   <div id="two"></div>
</div>

and style:

#one
{
    background-color: #EEE;
    padding: 5px;
    width: 200px;
}

#two
{
    background-color: #F00;
    display: inline-block;
    height: 30px;
    width: 100px;
    opacity: 0.1;
}

I wanted something like:

but coming as:

html css

Views: 4323
Total Answered: 1
Total Marked As Answer: 1
Posted On: 28-Dec-2019 06:46

Share:

Answers

Smith

None

2568 Points

74 Posts

First put position of the parent DIV to relative i.e. position: relative; and then set position of the child DIV to absolute i.e position:absolute; with the offset you want i.e top: 20 etc.:

#one
{
    background-color: #EEE;
    padding: 5px;
    position: relative;
    width: 200px;
}

#two
{
    background-color: #F00;
    display: inline-block;
    height: 30px;
    width: 100px;
    opacity: 0.1;
    position: absolute;
    top: -50px /*change it as required position*/
}