nodebcjan6/examples/css/layout/absolute2.html at master · Agnes2006/nodebcjan6 · 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
<!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>