Fix Position of a DIV relative to another DIV

Priya
Priya
Member
70 Points
30 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:

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

Share:   fb twitter linkedin
Answers
Smith
Smith
Participant
464 Points
122 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*/
}
Posted On: 29-Dec-2019 01:23
thanks
 - Priya  08-Feb-2020 01:59
 Log In to Chat