I have an iFrame, which I wish to align to the bottom right of the browser window. The following CSS actually achieves this in the first instance.
However, if the page the iFrame is initiated from has a horizontal scroll bar, the iFrame remains at the same vertical position.
.iframe {
position: absolute;
top: 100%;
right: 0%;
width: 535px;
height: 380px;
margin-top: -400px;
margin-right: 20px;
z-index: 999;
}
Is it possible to position is so its always aligned to the bottom of the browser window?
try with fixed position
.iframe {
position: fixed;
bottom: 10px;
right: 20px;
width: 535px;
height: 380px;
z-index: 999;
}
Remove margin and top, change right: 0 and add bottom: 0. Try this I hope it'll help you out. Thanks
.iframe {
position: absolute;
bottom: 0;
right: 0;
width: 535px;
height: 380px;
z-index: 999;
}
<iframe class="iframe"></iframe>
Related
http://lucasdebelder.be/googledoodle/
I want to have the planet (bottom image) on top of the top image (the blue background/space). I have a main div class:"center" set on 'position: absolute' and around both of those images is separately a div wrapped with position: relative; but somehow they don't want to go and sit on top of each other, I've also tried it with z-index but that doesn't work either.
Thanks in advance.
Use these properties the planeet_achtergrond class:
.planeet_achtergrond{
position: absolute;
bottom: 150px;
}
I would recommend nesting the two images in a div then adding a class to each image. Then use margin: 0 auto to center the div to the page. This is my solution:
#googledoodle {
position: relative;
top: 0;
left: 0;
height:512px;
width:900px;
margin: 0 auto;
overflow: hidden;
}
.galaxy {
position: relative;
top: 0;
left: 0;
}
.planet {
position: absolute;
top: 380px;
left: 0px;
}
<div id="googledoodle">
<img src="http://lucasdebelder.be/googledoodle/images/galaxy.png" width="900" class="galaxy">
<img src="http://lucasdebelder.be/googledoodle/images/planeet.png" width="950" class="planet">
</div>
i changed all css. Here sample:
.center {
position: relative;
text-align: center;
width: 900px;
margin: auto;
overflow: hidden;
height: 500px;
}
.space_achtergrond {
width: 100%;
z-index: 0;
position: absolute;
height: auto;
bottom: 0;
}
.planeet_achtergrond {
width: 100%;
height: auto;
z-index: 100;
position: absolute;
bottom: -15px;
}
form {
position: absolute;
bottom: 15px;
z-index: 999;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
use overflow:hidden outer div.
if you want place divs inside a div with position:absolute, use position:relative for parent div.
if you want to stick a div bottom, use only bottom:0
Tried to make a website menu with three full screen background overlays, but background video (underlying) in that menu is shifted down. What is wrong with positioning markup?
CSS:
.videoContainer {
position: relative;
width: 100%;
height: 100%;
//padding: 20px;
border-radius: 1px;
overflow: hidden;
}
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: relative;
z-index: -5;
}
.videoContainer .overlay-vid-1 {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
background: black;
opacity: 0.5;
}
P.s. - tried playing with z-index, position: and <div> reordering, but no luck.
P.p.s. - yes, i know, this is not the whole code, but system informer said that I can`t paste whole code, so there is a link to codepen, thank you.
You need to change the position of your video to position: absolute; because it's being pushed down by the .overlay-content. Try changing your CSS to look like this:
CSS
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: absolute; /* Change to absolute */
top: 0px; /* Set top to 0px */
z-index: -5;
}
Updated CodePen
I have the following HTML
<div class="first-use-overlay overlay-bg hide">
<div class="first-user-overlay-shell">
.....
</div>
</div>
and the following css
.first-user-overlay-shell {
width: 90%;
min-width: 1200px;
max-width: 1380px;
z-index: 1000;
overflow: scroll;
position: absolute;
top: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.overlay-bg {
z-index: 105;
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: rgba(0,0,0, 0.8);
}
Basically, when I click a button it opens up an overlay with a div (first-user-overlay-shell) that is another page of the side.
I added a no scroll to the body of the page.
I'm trying to make it so that content inside first-user-overlay-shell scrolls though the body has a no-scoll css. How can I do that?
Just try this one, add 1 div after first-user-overlay-shell then add height or just check this fiddle.
How can I make a sticky sidebar with a footer that doesn't move when the page is scrolled. I tried this css but its making the sidebar not appear at all.
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background-color: #F8F8F8;
}
But the sidebar isn't showing up at all. I have a fiddle of a working demo: https://jsfiddle.net/DTcHh/15259/
You can try this;
nav {
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: whatver;
width:whateverpx;
padding: 10px;
}
rename the nav as necessary for your page.
I have a #background and a #content box. The #background is supposed to be at top, and #content box have a margin-top of X pixels.
Now, the problem is that even though #background have the position: absolute; property, it follows the #contents margin.
Why is the #background affected?
HTML
<div id="background"></div>
<div id="content">Content</div>
CSS
#content {
width: 200px;
margin: auto;
margin-top: 150px;
background-color: Coral;
}
#background {
width: 100%;
height: 500px;
position: absolute;
background-color: AntiqueWhite;
z-index: -1;
}
Reproduced problem http://jsfiddle.net/GeU35/
So you just needed to set its position via top: 0;. Remember you can add left: 0; to make it sit to the left as well. Also anyway you want. bottom: 0; and right: 0;.
CSS:
#background {
width: 100%;
height: 500px;
position: absolute;
top: 0;
left: 0;
background-color: AntiqueWhite;
z-index: -1;
}
DEMO HERE
Not quite sure if I understand, but will doing this fix your issue? Ultimately setting top: 0 and left: 0 to #background
#background {
width: 100%;
height: 500px;
position: absolute;
top: 0;
left: 0;
background-color: AntiqueWhite;
z-index: -1;
}
It's an interesting effect, but ultimately you have specified an absolute position, then not given any position information. I believe that's why it misbehaved. As mentioned in other answers simply setting something like top:0px solves it readily.