CSS_Position_Lab/index.html at main · drtupper/CSS_Position_Lab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Positioning Lab</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <a href="html/task1.html">Task 1</a>
    <a href="html/task2.html">Task 2</a>
    <a href="html/task3.html">Task 3</a>
    <h1>Positioned Layout Lab</h1>
    <p>This is the starter code for the positioned layout lab.
        Read the text on this page, then go to task 1 by clicking the hyperlink
        above to get started.</p>
    <h2>Static and Relative Positioning</h2>
    <p>The default positioning mode that you’ve gotten used to is position: static.
        The difference between static and relative is fairly simple. Static is the
        default position of every element, and properties top, right, bottom, and
        left do not affect the position of the element. Relative on the other hand
        is pretty much the same as static, but properties top, right...(etc.)
        displace the element relative to its normal position in the flow of the document.</p>
    <h2>Absolute Positioning</h2>
    <p>position: absolute allows you to position something at an exact point on the screen
        without disturbing the other elements around it. More specifically, using absolute
        positioning on an element will remove that element from the normal document flow
        while being positioned relative to an ancestor element. To put it in other words:
        elements that are removed from the normal flow of the document don’t affect other
        elements and are also not affected by other elements. Using absolute positioning
        allows you to position elements anywhere on the screen using top, right, bottom,
        and left properties. This property is really useful when you want to position
        something at an exact point on the screen, without disturbing any of the other
        elements. A couple of good use cases for absolute positioning are:
        </p>
        <ul>
            <li>modals</li>
            <li>image with a caption on it</li>
            <li>icons on top of other elements</li>
        </ul>
        <h2>Fixed Positioning</h2>
        <p>Fixed elements are also removed from the normal flow of the document and are
            positioned relative to the viewport. You basically use top, right, bottom,
            and left properties to position it, and it will stay there as the user scrolls.
            This is especially useful for things like navigation bars and floating chat buttons.</p>
    </body>
</html>