HTML/CSS/Box Model/right
Содержание
- 1 Absolute Outside and Top Left positioned with 100% right
- 2 right aligns the right side of an absolute element to the right side of its container and offsets it by a positive or negative value.
- 3 This element is offset from its original position to the right
- 4 Top-right Absolute positioned element
- 5 Use "right" to offset the right side of an element from the right side of its reference position.
- 6 width is a value, left is auto, and right is a value
- 7 width is a value, left is a value, and right is auto
Absolute Outside and Top Left positioned with 100% right
<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;
}
- .left {
position: absolute; right: 100%; margin-right: 5px; background: red;
}
- .top {
position: absolute; bottom: 100%; margin-bottom: 5px; background: red;
} </style> </head> <body>
Absolute Outside Top Left
</body> </html>
</source>
right aligns the right side of an absolute element to the right side of its container and offsets it by a positive or negative 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;
}
- .box {
position: absolute; overflow: auto; visibility: visible; z-index: 1; right: 300px; 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>
This element is offset from its original position to the right
<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>Relative Positioning</title> <style rel="stylesheet" type="text/css">
div {
background: yellow; border: 1px solid black; margin: 0 20px;
} p#offset {
margin: 0; background: pink; border: 1px solid crimson; position: relative; top: 10px; right: 10px;
}
</style> </head> <body>
This element is offset from its original position to the right.
</body>
</html>
</source>
Top-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#top-right {
top: 0; right: 0; border-left: 1px solid black; border-bottom: 1px solid black; background: yellow;
}
</style> </head> <body>
Top, Right
</body>
</html>
</source>
Use "right" to offset the right side of an element from the right 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; right: -100px;
}
</style> </head> <body>
Positioned
</body> </html>
</source>
width is a value, left is auto, and right is a 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: 300px; left: auto; right: 10px; 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 is a value, left is a value, and right is 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: 300px; left: 10px; 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>