Media Projector Ignoring Position: Fixed
I have looked everywhere for a solution for this and cannot believe the answer has eluded me so far. My appearance is the last resort here. I hope you don't mind, I'm collecting your brains.
On a website I am creating, I am trying to position the graphics in the upper right corner of the screen. Then, when the window shrinks to 760px or less, I want it to move to the bottom. No matter what I do, the thing just won't budge. He stays at the top. Here is some very simple code and it doesn't work either:
Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css.css" id="theme_color">
</head>
<body>
<div class="mydiv">HELLO!</div>
</body>
</html>
and CSS:
@charset "utf-8";
/* CSS Document */
.mydiv {
position:fixed;
top:0;
right:0;
}
@media only screen and (max-width: 760px) {
.mydiv {
bottom:0;
}
}
That all the code is there. You can see that the word "hello" appears from the top right. But when you make the browser window narrow, instead of moving down the way I want it, it stays at the top.
BUT ... if you change the CSS so that the div starts at the bottom (widescreen) and moves to the top as it shrinks, it works as it should:
.mydiv {
position:fixed;
bottom:0;
right:0;
}
@media only screen and (max-width: 760px) {
.mydiv {
top:0;
}
}
Completely dead end. Ideas? Tried Chrome, FF and IE, all latest versions. Windows 7.
Thank.
Mark
source to share
This is because it top
has a greater advantage than bottom
, so the bottom value is ignored:
If top and bottom sides are specified, if no height is specified, automatically or 100%, both the top and bottom distances will be respected. Otherwise, if the height is constrained in any way, the top property takes precedence and the bottom property is ignored.
So, you need to install top
in auto
, try this:
@media only screen and (max-width: 760px) {
.mydiv {
bottom:0;
top:auto;
}
}
Check out this demo http://jsfiddle.net/brsrmq4v/
source to share
@Danko posted a fix, you need to set top: auto
(default) to undo the effect top: 0
.
Link: https://developer.mozilla.org/en-US/docs/Web/CSS/top
If you want to understand how values are top
and bottom
are computers, see the CSS spec:
http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height
What your original code did is more clearly visible if you added a border to div
.
By setting bottom: 0
, you have increased the height of the block.
.mydiv {
position:fixed;
border: 1px dotted blue;
top:0;
right:0;
}
@media only screen and (max-width: 760px) {
.mydiv {
bottom: 0;
}
}
<div class="mydiv">HELLO!</div>
source to share