position absolute offset: bottom left : position « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. position

position absolute offset: bottom left

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type='text/css'>
            div {
                position: absolute;
                width: 150px;
                height: 150px;
                padding: 10px;
                border: 1px solid black;
                opacity: 0.7;
                background: lightyellow;
            }
            div#div1 {
                bottom: 0;
                left: 0;   
            }
            div#div2 {
                bottom: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div id='div1'>
            This is the text of the first div.
            This is the text of the first div.
        </div>
        <div id='div2'>
           This is the text of the second div.
           This is the text of the second div.
        </div>
    </body>
</html>








Related examples in the same category

1.'position' Example
2.position: absolute; top: 0; left: 0;
3.position: absolute; top: 0; right: 0;
4.position: absolute; bottom: 0; left: 0;
5.position: absolute; bottom: 0; right: 0;
6.position-absolute
7.position-absolute: offset
8.position absolute offset: bottom right
9.position absolute offset: no width no height
10.position absolute offset: right
11.position absolute offset: top right bottom left
12.position fixed
13.position relative
14.position: relative, absolute
15.position: relative;
16.position: relative; top: 25px; left: 25px;
17.position: relative; top: 10px; left: 10px;
18.Relative Positioning
19.Absolute Positioning
20.Fixed Positioning
21.Floating Positioning
22.CSS Positioning
23.HTML to demonstrate CSS positioning
24.Absolute position from the bottom
25.position: relative; top: 100px; left: 20px;
26.background-position: 75px 150px;
27.Positioning Items
28.positioned in relation to containing element
29.CSS Positioning
30.CSS positioning
31.CSS positioning 2
32.Using absolute positioning to center a box onscreen
33.The list-style property: combine three separate properties, list-style-type, list-style-image, and list-style-position
34.Elements that are absolutely positioned are positioned, by default, relative to the browser's viewport.
35.This element is positioned to the bottom right of the relatively positioned element.
36.Elements in fixed position stay in place, even when a document is scrolled and are positioned relative to the browser's viewport.
37.position: absolute; and nested effect
38.Image positioned in relation to containing element
39.position:relative; top:20px; left:20px;