HTML/CSS/Box Model/bottom
Содержание
- 1 Absolute offset
- 2 Absolute Outside Top Right with 100% bottom
- 3 Absolute to left and bottom
- 4 bottom aligns the bottom side of an absolute element to the bottom side of its container
- 5 Bottom always
- 6 Bottom auto
- 7 Bottom-left Absolute positioned element
- 8 Bottom-right Absolute positioned element
- 9 horizontally stretching content with top, right and left
- 10 positioning and sizing
- 11 Position layer
- 12 Positioning Layers
Absolute offset
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Opposing Offset Properties</title> <style rel="stylesheet" type="text/css"> div#offset-four { background: yellow; border: 1px solid rgb(128, 128, 128); position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; }
</style> </head> <body>
</body> </html> </source>
Absolute Outside Top Right with 100% bottom
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" title="text/css">
- .parent {
left: 300px; top: 300px; position: relative; height: 140px; width: 200px; background: black;
}
- .right {
position: absolute; left: 100%; margin-left: 5px; background: red;
}
- .top {
position: absolute; bottom: 100%; margin-bottom: 5px; background: red;
} </style> </head> <body>
Absolute Outside Top Right
</body> </html>
</source>
Absolute to left and bottom
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title></title> <style rel="stylesheet" type="text/css">
body {
background: pink; font: 12px sans-serif; margin: 0; padding: 0;
} p {
background: red; border: 1px solid green; padding: 5px; margin: 5px;
} p#absolute {
position: absolute; bottom: 0; left: 0;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa.
</body>
</html>
</source>
bottom aligns the bottom side of an absolute element to the bottom side of its container
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- .container {
position: relative; background: black;
}
- .box {
position: absolute; overflow: auto; visibility: visible; z-index: 1; bottom: 20px; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .before {
z-index: 2; width: 100px; height: 400px; left: 400px; right: auto; top: 100px; bottom: auto; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
Bottom always
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title></title> <style rel="stylesheet" type="text/css">
body {
background: lightyellow; font: 12px sans-serif; margin: 0; padding: 0;
} p {
background: red; border: 1px solid black; padding: 5px; margin: 5px;
} p#absolute {
position: absolute; bottom: 0; left: 0; right: 0;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</body>
</html>
</source>
Bottom auto
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- abs {
width: auto; height: auto; left: auto; bottom: auto; position: absolute; background: blue;
} </style> </head> <body>
Shrinkwrapped Absolute
</body> </html>
</source>
Bottom-left Absolute positioned element
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>Absolute Positioning</title> <style rel="stylesheet" type="text/css">
body {
background: yellowgreen;
} div {
position: absolute; background: yellow; padding: 5px; width: 100px; height: 100px;
} div#bottom-left {
bottom: 0; left: 0; border-right: 1px solid black; border-top: 1px solid black; background: blue;
}
</style> </head> <body>
Bottom, Left
</body>
</html>
</source>
Bottom-right Absolute positioned element
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>Absolute Positioning</title> <style rel="stylesheet" type="text/css">
body {
background: yellowgreen;
} div {
position: absolute; background: yellow; padding: 5px; width: 100px; height: 100px;
} div#bottom-right {
bottom: 0; right: 0; border-left: 1px solid black; border-top: 1px solid black; background: red;
}
</style> </head> <body>
Bottom, Right
</body>
</html>
</source>
horizontally stretching content with top, right and left
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title></title> <style rel="stylesheet" type="text/css">
body {
background: lightyellow; font: 12px sans-serif; margin: 0; padding: 0;
} p {
background: red; border: 1px solid black; padding: 5px; margin: 5px;
} p#absolute {
position: absolute; bottom: 0; left: 0; right: 0;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</body>
</html>
</source>
positioning and sizing
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title></title> <style rel="stylesheet" type="text/css">
body {
background: pink; font: 12px sans-serif; margin: 0; padding: 0;
} p {
background: red; border: 1px solid green; padding: 5px; margin: 5px;
} p#absolute {
position: absolute; bottom: 0; left: 0;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa.
</body>
</html>
</source>
Position layer
<source lang="html4strict">
<html> <head> <style type="text/css"> div.layer1 {
position:absolute; left:75px; top:75px; color:red
} div.layer2 {
position:absolute; right:75px; bottom:75px; font-family: arial; color:blue; font-weight:bold
} </style> </head> <body>
Positioning Layers
This is the first layer1 paragraph
This is the second layer1 paragraph
This is the first layer2 paragraph
This is the second layer2 paragraph
</body> </html>
</source>
Use bottom to offset the bottom of an element from the bottom.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> div,p,em {
margin: 10px; padding: 10px; background-color: white; border-left: 1px solid gray; border-right: 2px solid black; border-top: 1px solid gray; border-bottom: 2px solid black;
}
- .pos {
position: relative; bottom: -10px;
}
</style> </head> <body>
Positioned
</body> </html>
</source>