CSS Position:fixed Inside A Positioned Element
Answer :
You can use the position:fixed;
, but without set left
and top
. Then you will push it to the right using margin-left
, to position it in the right position you wish.
Check a demo here: http://jsbin.com/icili5
The current selected solution appears to have misunderstood the problem.
The trick is to neither use absolute nor fixed positioning. Instead, have the close button outside of the div with its position set to relative and a left float so that it is immediately right of the div. Next, set a negative left margin and a positive z index so that it appears above the div.
Here's an example:
#close
{
position: relative;
float: left;
margin-top: 50vh;
margin-left: -100px;
z-index: 2;
}
#dialog
{
height: 100vh;
width: 100vw;
position: relative;
overflow: scroll;
float: left;
}
<body>
<div id="dialog">
****
</div>
<div id="close"> </div>
</body>
Position:fixed
gives an absolute position regarding the BROWSER window. so of course it goes there.
While position:absolute
refers to the parent element, so if you place your <div>
button inside the <div>
of the container, it should position where you meant it to be.
Something like
EDIT: thanks to @Sotiris, who has a point, solution can be achieved using a position:fixed and a margin-left. Like this: http://jsfiddle.net/NeK4k/
Comments
Post a Comment