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

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable