How to show a div on top of the page in fixed position?
Question
I'm having some issues to keep my Loaded-Content image on a position:fixed.
My Container loads an hidden content by clicking the button, with a transition the loaded content should slide from the right to Left. Its should be always on the top.
The loaded-content <div class="sticky">cat image</div> should always be fixed on the top. Any help would be much appreciated.
<html>
<div class="container">many photos</div>
<button>LOADED-CONTENT comes in transform(translateX(0%)</button>
</html>
<html>
sticky image always on top.
<button>back button slides the loaded content transform(translateX(100%)</button>
</html>
3 answers
solution1
0 2014-05-06 04:14:33
Add CSS and specity that div class to be always on top
<style>
.sticky
{
position: fixed;
top : 0px;
left : 0px;
width : (specify) ;
height : (specity here);
}
</style>
solution2
0 2014-05-06 10:53:16
solution3
-1 2014-05-06 11:20:18
You should always learn more about CSS before you actually use it.
In this situation, a few attributes will be used :
-
width -
top -
left(orright) -
position
The whole code is this :
.selector {
position: fixed;
top: 0;
left: 0; /* Or right:0; */
width: 100%; /* Or change it if you want */
}
Change .selector to the selector you need.
Use position:fixed to fix the position in the page.
Specifying the top makes the distance from the top of the page and the element to be 0 all the time.
Specifying the left / right will also fix the distance between left / right and the element.
Finally, specifying the width will make a bar on top of your page.
Please, always search for it before you ask : Search
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.