Menu
I have the following HTML format, what is the efficient way to position the given element on the top on a desktop and bottom on mobile devices (width < 640pixels)? Since there are lots of different devices, I don't want to write the position coordinates since the contents of the page's height varies. Any suggestions?
<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>
629
If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
To put an element at the bottom of its container with CSS, you need to use the following properties and values: position: relative; (parent) position: absolute; (child) bottom: 0; (child)
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
Reordering elements of unknown heights in a responsive fashion is best done with Flexbox. While support isn't great for desktop browsers (IE being the primary limiting factor here, support starts with v10), most mobile browsers do support it.
http://cssdeck.com/labs/81csjw7x
@media (max-width: 30em) {
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/* optional */
-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.container .first {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
http://caniuse.com/#feat=flexbox
Be aware that Flexbox can clash with other layout methods, such as the typical grid techniques. Flex items that are set to float can cause unexpected results in Webkit browsers using the 2009 specification (display: -webkit-box).
168
Better compatibility than flexbox can be achieved with display: table-footer-group (IE8+)
Reverse effect: to move an element higher than it is in the HTML code, you can try table-caption and table-header-group.
Doesn't work with self-replaced elements like img or input, at least on Chrome (and that's quite normal) but fine with div for example.
EDIT: it's 2016 so Flexbox (and Autoprefixer) all the things \o/
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
