node_comit/resources/examples/css/layout/absolute2.html at master · prma85/node_comit · 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
  <head>
    <title>Learning CSS</title>
    <style>
      body {
        border: 2px solid orange;
      }

      div {
        border: 1px solid black;
        background-color: #eee;
      }

      div.container {
        position: relative;
        height: 150px;
        background-color: green;
      }
      div.container .absolute {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 50px;
        background-color: pink;
        border-color: red;
      }
    </style>
  </head>
  <body>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed aliquet
      risus. Aenean ornare libero libero, non tempus erat dictum non. Aenean
      ultricies cursus ligula quis finibus. Maecenas sed suscipit sem. Praesent
      lacinia, nulla a venenatis faucibus, velit ex malesuada quam, eget porta
      ante neque vitae odio. Nunc nec neque molestie, porta risus non, mattis
      massa. In sed congue quam, nec accumsan justo. Sed feugiat urna ultricies
      lacus interdum, vitae imperdiet risus lacinia. Sed eu purus in mauris
      iaculis viverra eu ac libero. Nunc porta purus eget libero imperdiet, id
      vulputate eros consequat. Sed ac dictum dui, eget rhoncus leo. Etiam vel
      convallis ligula. Sed imperdiet leo eget magna cursus feugiat.
    </div>
    <div>
      Etiam a diam imperdiet, semper sem congue, faucibus odio. Vivamus porta
      tincidunt quam ac molestie. Mauris congue gravida mauris in facilisis.
      Maecenas sit amet velit quis erat vulputate facilisis. Donec leo tortor,
      viverra et risus sed, elementum dictum nulla. In elementum ligula eleifend
      varius egestas. Cras iaculis non sapien a aliquam. Sed et ligula at arcu
      pellentesque auctor. Etiam hendrerit, purus et volutpat efficitur, sapien
      justo iaculis nisl, non efficitur nisl urna eu orci.
    </div>
    <div class="container">
      <div class="absolute">
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Aenean at ipsum leo. Quisque fermentum interdum
        lorem vitae commodo. Donec in felis non nisi tincidunt molestie a ut
        lectus. Fusce in luctus augue. Nulla at faucibus sem, eu rutrum nisi.
        Vestibulum in nibh eget nibh pretium fringilla. Orci varius natoque
        penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Curabitur eget purus convallis, vestibulum justo eget, maximus ipsum.
        Duis vel porta velit.
      </div>
    </div>
    <div>
      Vivamus justo velit, sodales eu tempus vitae, rutrum a libero. Sed congue
      nisl rutrum nulla porta, ut tincidunt erat faucibus. Etiam mattis bibendum
      leo, eu rutrum nisi bibendum ac. Donec elementum, lectus nec consectetur
      pretium, nulla dui condimentum ligula, quis porttitor eros lorem sed
      purus. Quisque ut leo at tortor pellentesque accumsan. Quisque vel leo ut
      mauris cursus lacinia a gravida ligula. Pellentesque vitae nisi sit amet
      nisl auctor lobortis ac et odio. Cras semper erat nec libero luctus
      laoreet. Donec dolor mi, venenatis quis volutpat id, fermentum vitae
      metus. Proin nec vulputate elit, id gravida enim. Mauris pulvinar volutpat
      nisi, at varius mauris imperdiet eget. Nulla convallis porttitor
      imperdiet. Maecenas tincidunt vulputate faucibus. Aliquam facilisis nec
      mauris nec ultrices. Curabitur vitae molestie risus. Nulla vel massa elit.
    </div>
    <div>
      Donec ut felis id libero scelerisque lobortis a facilisis leo. Nulla nec
      felis vehicula, feugiat velit a, sodales enim. Aliquam erat volutpat. Duis
      hendrerit ligula sit amet eros auctor, sed dapibus risus tincidunt. Morbi
      eu finibus ipsum. Praesent vulputate ipsum quam, nec finibus nisl pretium
      non. Integer non neque ac purus sollicitudin ornare. Donec eu porttitor
      eros, non interdum purus. Nullam tempus id erat non elementum. Fusce nec
      velit magna. Mauris malesuada arcu et enim luctus blandit. Vestibulum
      maximus elementum lorem luctus tincidunt. Morbi in ultrices orci, ac
      venenatis ex.
    </div>
  </body>
</html>