What should be a super simple one here, but its getting me to scratch my head. I have a div with an H1 and P tag that is overlaid on top of a Three.JS 360° video viewer on this website: http://gloriouslabs.com/#page-5
Right now the code for that div is:
.video_tag {
position: absolute;
z-index: 100;
top: 15%;
left: 5%;
width: 230px;}
Works fantastically on Chrome with the position tag rendering it in reference to the top of the screen. However on Firefox, the div renders itself from the top of the PAGE, not the SCREEN (on Firefox you can see the .video_tag div appear on the top of the screen at http://gloriouslabs.com/)
Any ideas why it's acting like that? The same bug happens on both absolute and fixed position.
Cheers!
I opened your page in firefox's inspect and added this position: relative;:
#holder {
height: 100%;
width: 100%;
position: relative;
}
It is working, but I didnt test back in chrome
Set your container to relative positioning
#holder {
position: relative;
}
If this is not the right container then set it on the one you need
Related
Hi is there a simple way to prevent a fixed sidebar som scrolling over a footer or a specific element? I've tried changing it from fixed to absolute depending on different viewport height but my application is nested in a lot of position relative elements so I haven't managed to get it to work yet.
Here is a code example: https://codesandbox.io/s/fixed-sidebar-7gvpf?file=/src/index.js
Ask if I need to clarify anything.
Thanks beforehand,
Erik
Because the element is fixed and therefore outside the normal page flow you can z-index to specify if an element is above or below another.
In your case you can use it like this with z-index: -1; so it wil be positioned behind the element.
const SideBar = styled("div")`
background-color: green;
height: calc(100vh);
width: 50px;
position: fixed;
z-index: -1;
`;
If this causes the sidebar to disappear behind everything you also can set the z-index on the footer with position: relative; to get it to work. like the following CSS:
const Footer = styled("div")`
background-color: blue;
height: 200px;
position: relative;
z-index: 1;
`;
Here is an MDN article on z-indexes if you want to know more
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
So I am trying to create a left-sided nav bar, but after scrolling I can't get it to correctly stay to the left.
I have tried using:
position: fixed;
and
position: absolute;
However it cuts the width of the DIV down completely.
To get a view of what I'm working with go to: http://198.50.242.77/YouBB/
I'd prefer to use strictly CSS only but if I must use JS I'll use it.
Thanks!
position: fixed is what you want. This causes the element to be removed from the flow entirely and stay in the same position even after scrolling the page.
position: absolute is similar, but it only removes an element from the flow. Scrolling a containing div (or in this case, the whole page) will still cause it to move.
I opened up your web page in Chrome, and changed the styles for #navigation to:
background: white;
height: 100%;
text-align: center;
position: fixed;
width: 18.72%;
This does what you want. You will just need to position the rest of the content to the right.
I've got a problem with the google map, basically on the top of my website I've got a menu, which is always on the top, even if you scroll page down.
The CSS for the menu:
#MyMenu{
width: 100%;
height: 105px;
position: fixed;
}
I got my Google map script from here.
And the problem is, when I scroll my page down to see Google map script, the menu hides under my Google map.
Is there is any way to make my menu always above all div and script? Because right now it goes under my Google map.
Try adding a high z-index value on your menu.
z-index:1000
It would need to be higher than the section containing the map. You may also need to define position:relative and a z-index on the menu's parent, if this seems to have no effect. You can test this out easily with FireBug or Chrome Developer tools.
Assuming your map is wrapped in a specific element on your page, for instance:
<div id="gmap"></div>
You can use CSS to give it a z-index:
#gmap {
z-index: 100;
position: relative;
}
And give a higher z-index to #MyMenu:
#MyMenu {
z-index: 110;
width: 100%;
height: 105px;
position: fixed;
}
I have a div that contains an iFrame and I want to ensure that it always stays stuck to the bottom of the browser window. I need it to remain fixed there when the page scrolls (or at least update its position). I've tried
position: fixed; bottom: 0px; left: 0px
but to no avail. I can do this easily if I want the div at the top of the screen, I just update the div top to the value of document.body.scrollTop. Any help would be greatly appreciated.
Capture the window.onresize event. In that event handler, calculate the x,y position of the div based on the scroll position and of the window. Set the top and left attributes of the div to the x,y coordinates you calculated. You will also want to position the div using the window.onload event to make sure it starts out in the correct position.
Remember to set the doctype, then it should work fine... the following example works in ie7/ie8/firefox/chrome (it will not work for ie6) and probably more browsers:
<!DOCTYPE html>
<html>
<head>
<style>
#stay-at-bottom { position: fixed; bottom: 0; left: 100px; width: 500px; height: 200px; overflow: hidden; background: #f00;}
#stay-at-bottom iframe { width: 500px; height: 200px; position: relative; }
</style>
</head>
<body>
<div id="stay-at-bottom"><iframe src="http://google.com"></iframe></div>
</body>
</html>
I'm using jQuery to create a "dialog" that should pop up on top of the page and in the center of the page (vertically and horizontally). How should I go about making it stay in the center of the page (even when the user resizes or scrolls?)
I would use
position: fixed;
top: 50%;
left: 50%;
margin-left: -(dialogwidth/2);
margin-top: -(dialogheight/2);
but with this solution and a browsers viewport-size of less than your dialog is, parts of the dialog will be unreachable on top and left sides because they are outside the viewport.
So you have to decide if it's suitable for your dialogs size.
(CSS doesn't know how to calculate, yet. So the little math over there has to be done by you, right now. Therefore your dialog has to be a fixed size which you have to know.)
Edit:
Oh yes, if you want to serve your dialog for the IE6 too, you should do something like this:
#dialog { position: absolute; }
#dialog[id] { position: fixed; }
Since IE6 is not capable of fixed positions and also not capable of attribute-selectors, the IE6 will be the only one who has the position set to absolute. (This will only affect with scrolling behaviour. absolute stays on its place in page and fixed stays on its place in the browser. The rest is similar.)
Check out Infinity Web Design's piece on this.
#mydiv {
background-color:#F3F3F3;
border:1px solid #CCCCCC;
height:18em;
left:50%;
margin-left:-15em;
margin-top:-9em;
position:absolute;
top:50%;
width:30em;
}
This is the CSS they use, and I've tested it out in multiple browsers.
You'll note that the left margin is negative half the width and the top margin is negative half the height. This takes care of the centering, more or less, with absolutely positioning it at 50% top and left.
To put a div horizontally in the middle I always put margin: 0 auto. But it cannot be a floating element and in IE I always needed to put a div around and then give it the property text-align: center, so that the inside div is centered horizontally.
If you know the element's offset dimensions (width/height + padding), you can use this CSS:
elementContainerSelector {
position: fixed; /* You'll of course need to handle browsers that don't support fixed positioning */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
elementSelector {
position: absolute;
top: 50%;
left: 50%;
margin: -[half of offset height]px 0 0 -[half of offset width]px;
}
Hurix's answer works too, and bear in mind the caveats in that answer as well.
Keep margin-left:auto and margin-right:auto