Home >Web Front-end >CSS Tutorial >Layout DIV using position attribute

Layout DIV using position attribute

怪我咯Original: 2017-06-22 10:36:331809browse

Relative positioning and Absolute positioning

##Positioning tag: position Contains attributes : relative (relative) absolute (absolute)
1.position:relative; If an element is positioned relatively, first it will appear at its location. Then move the element "relative to" its original starting point by setting a vertical or horizontal position. (One more point, when positioned relatively, the element still occupies the original space regardless of whether it is moved. Therefore, moving the element will cause it to cover other boxes)

2.position:absolute; means absolute positioning, The position will be calculated starting from the upper left corner of the browser. Absolute positioning takes the element out of the document flow so it doesn't take up space. Elements in normal document flow are laid out as if absolutely positioned elements were not present. (Because absolutely positioned boxes have nothing to do with document flow, they can cover other elements on the page and their hierarchical order can be controlled via

z-index. The higher the z-index value, the more visible it is. In the upper layer.)

3. After the parent container uses relative positioning and the child element uses absolute positioning, the position of the child element is no longer relative to the upper left corner of the browser, but relative to the upper left corner of the parent window

4. Relative positioning and absolute positioning need to be used with top, right,

bottom, and left to locate the specific position. These four attributes only take effect after the element is positioned, and are invalid in other cases. In addition, these four attributes can only use two adjacent ones at the same time. You cannot use up and down at the same time, or use left and right at the same time.

The following is the relative absolute layout of multiple ps within a p:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
  <head>
    <title>testp.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
    <meta http-equiv="description" content="this is my page"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    
    <script type="text/javascript">
        window.onload = function(){
            document.getElementById("myp").style.height = "200px";
        };    </script>
  </head>
  
  <body>
      关键因素：外层加position:relative,里面的p使用position: absolute，<br />
      但这种方法的问题有：外层的p必须指定具体的height，高度不能使用百分比   <!--  <p style="position:relative;width: 600px;height:500px;">
        <p style="width: 100px;height: 50px; position: absolute;right:10px;bottom: 10px"></p>
    </p> -->
    
     <p id="myp" style="position:relative;width: 100%;height:auto;">
        <p style="width: 100px;height: 50px; position: absolute;right:10px;bottom: 10px"></p>
        <p style="width: 100px;height: 50px; position: absolute;left:10px;bottom: 10px"></p>
    </p>
  </body></html>

Rendering:

The above is the detailed content of Layout DIV using position attribute. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：In css position attribute: the difference between absolute and relativeNext article：In css position attribute: the difference between absolute and relative

See more

Layout DIV using position attribute

Related articles