How to make a div to always appear at the top of a web page even when the paged is scrolled vertically.
Use CSS position: fixed;:
#topdiv {
position: fixed;
top: 0;
}
See jsFiddle example: http://jsfiddle.net/CXACT/1/
div#myDiv {position: fixed; top: 0px; ...}
Css :
#topdiv {
position: fixed;
top: 0;
}
You can also make with JQuery,
Just always take the scrolltop value and change the div top.
$("#topdiv").css("top", scrolltop);
Related
I have an element in the middle of the page somewhere and i want it to have a fixed position at the top when the user scrools down and the element reaches the top.
I don't know if it can be done with media query.
Like
# height 90rem from top of page:
.element{
position: fixed;
top: 0;
left: 0;
}
You are looking for position: sticky;.
Try:
position: sticky;
top: 0px;
I have a Wordpress site and I wanted to display two vertical banners outside of the main container. I am using this css and it works on Firefoxs and IE. On Chrome however only the left one is shown. Any ideas?
#media only screen and (min-width: 1100px){
div.side-image-left {
position: absolute;
z-index: 98;
left: -840px;
top: -24px;
}
div.side-image-right {
position: absolute;
z-index: 99;
left: 342px;
top: -24px;
}
}
you can try floating the image not positioning. Now, as I have seen you used absolute positioning, so in this approach you also won't get always get the banners when scrolling down.
.side-left-image{
float:left; }
.side-right-image{
float: right; }
but z-index won't work!
I am trying to make a website, and it is vital that everything is positioned correctly. I have an element that I have that I want in a certain position on all devices. For example:
test {
top: 63%;
left: 43%;
}
The problem is, when I test my website on other browsers, and different screen sizes, the elements position goes crazy. Is there a way where I can set a position that will stay the same on every browser/screen size.
Thanks,
Tomothy
test {
top: 63%;
left: 43%;
position:absolute;
}
and in parent div position:relative;
so the test is set according to the parent div
You have to use the below code..
.test{ position:absolute; top: /*your value*/; left: /*your value*/;}
before the parent container of test..
.parent-container{ position:relative;}
left and top css properties are not working properly without position.
test {
position: absolute;
top: 63%;
left: 43%;
}
Note : you must define parent class of test is like..
test-parrent {
position: Relative;
}
I'm trying to create an invisible div, over the facebook comments plugin in order to disable the plugin's functionality in an Editor View. This invisible div works in all browsers except IE8. How can I fix this?
HTML:
<div id="container">
<div id="coveriframe"></div>
<div data-bind-component="fbml: fbml">(RENDER JS COMMENTS VIA KO)</div>
</div>
Try in IE8:
http://jsfiddle.net/pkbz4/19/
The above code works in ALL other Major browsers. WTF Microsoft?
Stylesheet:
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
I've done this several times in IE8. The solution that works for me is to assign a background color to the div and then set opacity to 0. IE8 then recognizes the div as "existing" above the rest of the content. I also find setting position: absolute and all four directions to 0 is more reliable than 100% width and height. Like this:
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
}
Here's my update to your jsfiddle: http://jsfiddle.net/pkbz4/21/
CSS Specification says:
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.
Basically, In older versions of IE (including IE8) percentage heights are based on the height of the parent element. If the parent element doesn't have an explicit height, the percentage is ignored and set to Auto (in this case, 0px).
So, to fix this, you'll either want to explicitly set the height/width of #coveriframe or its parent. One thing you could try is setting the height of html and body to 100% (I'm assuming those are the parent elements).
html, body { height:100%; }
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
why did you want to do in javascript and it works well in all browsers, I'll let my example I hope you work:
-----------------DIV-----------------
<div id="div1" style="display: block;">
<div class="mainbody">
<br />
</div></div>
-----------------JavaScript----------------
function showHideDiv(divX) {
if (divX == "1") {
document.getElementById("div1").style.visibility = "visible";
document.getElementById("div2").style.visibility = "hidden";
}
-----------------button HTML----------------
<li>click_Aqui</li>
The problem is that internet explorer up to ie9 doesn't recognize the mouse hover when hovered over a transparent background. Zach Shipley answer offers a good solutions.
But in case you want to add a border or an element to the transparent div or text the easiest way of doing this is by adding a 1px transparent png as background.
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background-image: url("pixel-transparent.png");
}
Make sure that you are putting fixed height & width to that DIV.
As Shaquin Trifonoff mentioned above sometimes 100% or any length in % may not work onIE8. Always I am trying to avoid % in such situation.
Code snippet :-
html,body{ //This makes your page expandable as per screen resolution
height:100%;
}
#your-hide-div{
height:100px;
width: 100px;
display:block;
}
I try to make a div expand in height, but it's expanding over the absolute positionned sticky footer at the bottom, here is a demo:
http://jsfiddle.net/UMLKf/1/
(I don't need to support old browsers)
Your margin-bottom: 200px rule will only affect subsequent elements in the document flow. It will not make your div 200px smaller than the browser window. To demonstrate I've set up a jsFiddle here.
If you want the bottom of your div to be 200px from the bottom of the browser window, you could absolutely position it with top: 0 and bottom: 200px. JsFiddle here.
Try this on your main div:
#content { position: absolute; top: 0; left: 0; right: 0; bottom: 200px; }
and footer:
#footer { position: absolute; bottom: 0; height: 200px; }
This could probably work with position: relative as well.
EDIT:
Here's a demo: http://jsfiddle.net/adaz/nQVPm/
I'm pretty sure this works on IE7+