HTML/CSS/Box Model/left
Содержание
- 1 Absolute Outside its parent on the Bottom Right with 100% left
- 2 Fixed block with width and height to left and bottom
- 3 left aligns the left side of an absolute element
- 4 Positive values offset to the right and negative to the left.
- 5 Relative offset float
- 6 Relative sized offset
- 7 Stacking order of three classes used in div elements in the body
- 8 Top-left Absolute positioned element
- 9 use "left" to offset the left side of an element from the left side of its reference position.
- 10 When all four offset properties are specified on the same element both width and height are implied.
- 11 width is auto, both left and right are some other value
- 12 width, left and right are auto
Absolute Outside its parent on the Bottom Right with 100% 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"> <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;
}
- .bottom {
position: absolute; top: 100%; margin-top: 5px; background: red;
}
- .right {
position: absolute; left: 100%; margin-left: 5px; background: red;
} </style> </head> <body>
Absolute Outside Bottom Right
</body> </html>
</source>
Fixed block with width and height 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>positioning</title> <style rel="stylesheet" type="text/css">
body {
background: lightyellow;
} p {
line-height: 2em; margin: 10px 10px 10px 110px;
} div {
width: 100px; height: 100px; border: 1px solid rgb(200, 200, 200); background: pink; position: fixed; bottom: 0; left: 0;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu Aenean dictum dolor ut sem.
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel conubia nostra, per inceptos hymenaeos.
</body>
</html>
</source>
left aligns the left side of an absolute 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"> <head> <title></title> <style type="text/css">
- .container {
position: relative;
}
- .box {
position: absolute; overflow: auto; visibility: visible; z-index: 1; left: 300px; right: auto; top: 0; bottom: auto; 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>
Positive values offset to the right and negative to the 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"> <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; left: -100px;
}
</style> </head> <body>
Positioned
</body> </html>
</source>
Relative offset float
<source lang="html4strict">
<!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></title> <style type="text/css" media="Screen"> .parent {
width: 600px; height: 600px; background: black;
}
- .float {
float: left; width: 90px; height: 40px; background: yellow;
}
- .relative {
position: relative; background: purple;
}
- .offset2 {
left: -50px; top: 10px; background: gray;
}
</style> </head> <body>
Float
</body> </html>
</source>
Relative sized offset
<source lang="html4strict">
<!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></title> <style type="text/css" media="Screen"> .parent {
width: 600px; height: 600px; background: black;
}
- .sized {
width: 90px; height: 40px; margin-left: auto; margin-right: 0; background: pink;
}
- .relative {
position: relative; background: purple;
}
- .offset3 {
left: 50px; top: 10px; background: red;
} </style> </head> <body>
Sized Static
</body> </html>
</source>
Stacking order of three classes used in div elements in the body
<source lang="html4strict">
<html>
<head> <style type="text/css">
.layer1 {
font-size: 190pt; font-weight: 900; color: white; z-index: 1; position: absolute; left: -100px; top: -120px; background: red;
} .layer2 {
font-size: 12pt; font-weight: 500; color: blue; z-index: 3; position: absolute; left: 40px; top: 80px; background: gold;
} .layer3 {
font-size: 100pt; font-weight: 300; color: yellow; z-index: 2; position: absolute; left: -20px; top: 0px; background: pink;
} </style>
</head> <body>
- A
- B
- C
</body>
</html>
</source>
Top-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#top-left {
top: 0; left: 0; border-right: 1px solid black; border-bottom: 1px solid black; background: pink;
}
</style> </head> <body>
Top, Left
</body>
</html>
</source>
use "left" to offset the left side of an element from the left side of its reference position.
<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; left: 100px;
}
</style> </head> <body>
Positioned
</body> </html>
</source>
When all four offset properties are specified on the same element both width and height are implied.
<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 { background: yellow; border: 1px solid rgb(128, 128, 128); position: absolute; width: 600px; height: 600px; } p#offset-four-copy { border: 1px solid black; background: gold; position: absolute; left: 20px; right: 20px; bottom: 20px; top: 20px; border: none; } </style> </head> <body>
When all four offset properties are specified on the same element both width and height are implied.
</body> </html> </source>
width is auto, both left and right are some other value
<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: auto; left: 0; right: 0; 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>
width, left and right are 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">
- .container {
position: relative; background: black;
}
- .box {
position: absolute; overflow: auto; visibility: visible; z-index: 1; bottom: 20px; width: auto; left: auto; right: auto; 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>