CODEWITHSUNDEEP
cssmedia-queriescss-position
Mark Garlick
Mark Garlick

Reputation: 31

Media query ignores position:fixed

I've looked everywhere for a solution to this and can't believe the answer has eluded me so far. My appearance here is a last resort. Hope you don't mind me picking your brains.

In a website I am building I am trying to position a graphic at the top right of the screen. Then when the window is narrowed to 760px or less, I want it to move to the bottom. No matter what I do the thing just will not move to the bottom. It stays at the top. Here is some very simple code, and it doesn't work here 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 the CSS:

@charset "utf-8";
/* CSS Document */

.mydiv { 
    position:fixed;
    top:0;
    right:0;
}

@media only screen and (max-width: 760px) {

.mydiv { 
    bottom:0;
}
}

That's all the code there is. You cab see that the word 'hello' appears top right. But when you make the browser window narrow, instead of moving to the bottom as I want, it stays at the top.

BUT... if alter the CSS, so that the div starts at the bottom (wide screen) and moves to the top on narrowing, it works as it should:

.mydiv { 
    position:fixed;
    bottom:0;
    right:0;
}

@media only screen and (max-width: 760px) {

.mydiv { 
    top:0;
}
}

Totally stumped. Ideas? Tried Chrome, FF and IE, all latest versions. Windows 7.

Thanks.

Mark

Upvotes: 3

Views: 4888

Answers (3)

Marc Audet
Marc Audet

Reputation: 46825

@Danko posted the fix, you need to set top: auto (the default value) to cancel out the effect of top: 0.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/top

If you want to get into the guts of how the top and bottom values are computer, see the CSS specification:

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

What your original code was doing is more clearly seen if you add a border to the div.

By setting bottom: 0, you have extended the height on 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>

Upvotes: 1

Anon
Anon

Reputation: 2874

Try this:

@media only screen and (max-width: 760px) {
    .mydiv { 
        top:0;
        bottom:auto;
    }
}

Upvotes: 1

DaniP
DaniP

Reputation: 38262

That's because top has more precedence that bottom so the value of bottom is being ignored:

When both top and bottom are specified, as long as height is unspecified, auto or 100%, both top and bottom distances will be respected. Otherwise, if height is constrained in any way, the top property takes precedence and the bottom property is ignored.

So you need to set the top to auto, try this:

@media only screen and (max-width: 760px) {

.mydiv { 
    bottom:0;
    top:auto;
}
}

Check this Demo http://jsfiddle.net/brsrmq4v/

Upvotes: 4

Related Questions