I have 3 buttons that I need to stay fixed in the lower right corner of the page.
Example.
But when I set position:fixed , it goes straight up to the top (which is also fixed).
How can I make them stay down there, yet when I scroll up to follow me?
Thank you!
Add position: fixed; bottom: 0; ,and remove the top:0;,the bottom property sets the bottom edge of an element.
Try this code:
DEMO
#buton{text-align:right;
height: 100px;
width: 100%;
z-index: 100;
position: fixed;
bottom: 0;
}
Remove
top:0
and set
bottom:0; position: fixed; right: 0;
#buton {
text-align: right;
height: 100px;
width: 100%;
z-index: 100;
position: fixed;
bottom: 0;
right: 0;
}
See Fiddle Demo
Wrap everything in a container and give it position relative
make #buton absolute with bottom:0
keep myButton independent of any position
working demo
html,body{
height:100%; /* important */
}
#conatiner {
position: relative;/* added*/
height:100%;/* important */
}
#buton {
text-align:right;
width: 100%;
z-index: 100;
position: absolute;/* added*/
bottom: 0;
}
The problem is with top:0; Since you need the buttons to stay fixed in the lower right corner of the page you should use bottom: 0;position: fixed;
Update the below part
#buton{
text-align:right;
height: 100px;
top: 0;
width: 100%;
z-index: 100;
}
to the one given below,
#buton{
text-align:right;
height: 100px;
bottom:0;
position: fixed;
width: 100%;
z-index: 100;
}
It will work like a charm.
Have made some changes, see the demo..
UPDATE :
See demo
Related
I have a question.
I got this so far:
I basically want the highlighted div to cover your device screen no matter how big the device screen is. now i see 2 different divs when i open this on my phone. i only want to see the one that is highlighted. How do I achieve this?
Thanks in advance,
kevin
You could use viewport height as your height value:
.main {
height: 100vh;
background-color: green;
}
<div class="main">
CONTENT
</div>
Using height: 100vh means the element in question always be 100% height of the viewport a user / devie has.
More info: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
You can probably do that by setting the position of the div that you want to make fullscreen, to absoluteand then apply the below CSS.
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
Thus, the final css would be as follows
.fullscreen{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
}
You can use position: absolute; or position: fixed.
Use absolute for just making it cover the whole page.
Use fixed to make it nailed in a default position. If u use fixed, even though your page is more than 100% you cannot scroll down to see any other things.
CSS
div.any {
position: absolute; /*position: fixed;*/
top: 0;
left: 0;
width: 100%;
height: 100%;
/*You can add anything else to this like image, background-color, etc.*/
}
HTML
<div class="any"></div>
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
object-fit: fill;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I need to place a background image (#foreground) on top of website global background(#wrapper). The problem is that wrapper's background is being displayed on top of foreground's, although wrapper has lower z-index and foreground.
HTML:
<body>
<div id="wrapper">
//website content here
</div>
<div id="foreground"></div>
</body>
CSS
#wrapper {
width:100%;
background:url(../img/header/main_bg01.jpg) repeat-x top center, url(../img/header/patternextra.jpg) repeat top center;
min-height:1650px;
overflow:hidden;
z-index: -2;
}
#foreground {
background: url(../img/foreground.png) repeat 90% 110%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: -1;
}
Regards,
z-index doesn't work without position being specified.
Try:
#wrapper {
width:100%;
background:url(../img/header/main_bg01.jpg) repeat-x top center, url(../img/header/patternextra.jpg) repeat top center;
min-height:1650px;
overflow:hidden;
z-index: -2;
position: relative;
}
Change z-indexes to positive values:
#wrapper {
z-index: 1;
}
#foreground {
z-index: 2;
}
Works for me: http://jsfiddle.net/jaakkokarhu/4y37zkpu/
I have a question regarding the absolute position div.
I have something like
<div id='body-container'>
<div id='content-wrapper'>
contents....
</div>
</div>
I need to make my body-wrapper with absolute position because of other issues.
my css
#body-container{
position: absolute;
right: 0;
left: 0;
height: 100%;
overflow-y: hidden;
}
I have encounter a problem. Inside my content-wrapper, I have dynamic contents that will be added inside. It will create a unwanted scrollbar and the div become scrollable in that div. Is there anyway to kill the scrolling behavior? Thanks so much.
Remove the height property from your #body-container, and it will fit the content's height. No scrollbar.
http://jsfiddle.net/QeFe5/
EDIT
If you need the wrapper to be full height, then don't forget to set the top: 0 property, so the body won't create a scroll:
#body-container{
position: absolute;
right: 0;
left: 0;
top: 0;
background: silver;
height: 100%;
overflow: hidden;
}
Updated: http://jsfiddle.net/QeFe5/1/
This might work...
#body-container{
position: relative;
}
#content-wrapper{
position: absolute;
right: 0;
left: 0;
height: 100px; /* Need to put an exact height */
overflow: hidden;
}
If you need the content-wrapper to extend the full page you can use top and bottom with absolute positioning and make sure that your body-container (and it's enclosing containers) have height 100%.
#body-container{
position: relative;
height: 100%;
}
#content-wrapper{
position: absolute;
top: 0;
bottom:0;
right: 0;
left: 0;
}
I am trying to create a gray transparent background screen, on top of my original html page.
What I have done so far is to append a div (with jquery) to the body tag with this css style:
.spesificPropertiesDiv {
position: absolute;
display: block;
top: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
as I mentioned before I am appending a div with this class to the body.
Every works fine when I append it on large screen (24 inch) but when I am appending it on 16 inch display the gray screen div's height is 100 px less than the body's height.
One more thing that I need to mention is that on large screen the page is fit on the screen where on the smaller screen a scroll-bar appears to make the page lower side of the page visible.
Why dose this happen? How can I fix it?
Thanks!
I have changed it to:
.spesificPropertiesDiv{
display: block;
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
and it works!!!!
Thank you all for the help
Could you try:
.spesificPropertiesDiv {
position: fixed; *position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Additionally, is there any padding on this div? Is it a direct child of the <body> tag?:
<body>
<div class="spesificPropertiesDiv"></div>
</body>
JSFiddle: http://jsfiddle.net/jYSYW/
I would like to put the pink menu at the bottom right of header .container. I did try to use position: relative; and aboslute but wihtout success...
Any clues ?
I also want NOT to apply the ul/li css to the bootstrap dropdown if possible.
Thanks
PS: This is a shortened version of my theme.
I added
header .container{
height: 80px;
position: relative;
overflow: hidden;
}
nav.pull-right {
position: absolute;
bottom: 0;
right: 0;
}
and it works.
here is a new fiddle for you: http://jsfiddle.net/dMu5y/
Like this? :)
Added:
.container nav.pull-right {
position: absolute;
right: 0;
bottom: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
}