Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Positioning context</title>
- <style>
- body {
- width: 500px;
- height: 1400px;
- margin: 0 auto;
- }
- div {
- position: fixed;
- top: 0;
- width: 500px;
- }
- h1 {
- text-align: center;
- margin: 0 auto;
- background-color: royalblue;
- padding: 5px 0 5px 0;
- }
- p {
- background: aqua;
- border: 3px solid blue;
- padding: 10px;
- margin: 10px;
- }
- span {
- background: red;
- border: 1px solid black;
- }
- p:nth-of-type(1) {
- margin-top: 60px;
- }
- </style>
- </head>
- <body>
- <div><h1>Positioning context</h1></div>
- <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
- <p class="positioned">Now I'm absolutely positioned relative to the <code><body></code> element, not the <code><html></code> element!</p>
- <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
- <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="long.jpg"></p>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement