zoukankan      html  css  js  c++  java
  • 相对定位与绝对定位

    1 相对定位

    相对定位实际上是被看做普通流定位模型的一部分,因为元素的位置是相对于它在普通流中的位置的,也就是元素的位置是相对其没有设置相对定位的位置。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>position relative</title>
    
        <style>
            div{
                width: 100px;
                height: 100px;
                border:1px solid #cccccc;
                display: inline-block;
            }
    
            .position_relative{
                position: relative;
                top: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div>div1</div>
        <div class="position_relative">div2</div>
        <div>div3</div>
    </body>
    </html>

    2 绝对定位

    绝对定位使元素的位置与文档刘无关,因此不占据空间。普通文档流中的其他元素的布局巨响绝对定位的元素不存在的时候一样。

    绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的元素,那么它的位置是相对于初始包含块的。根据用户代理的不同,初始包含块可能是html元素或者画布。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>position absolute</title>
        <style>
    
          div{
                width: 100px;
                height: 100px;
                border:1px solid #cccccc;
                display: inline-block;
            }
    
            .position_absolute{
                position: absolute;
                top: 40px;
                left: 40px;
                background-color: gray;
            }
    
        </style>
    </head>
    <body>
        <div>div1</div>
        <div class="position_absolute">div2</div>
        <div>div3</div>
    </body>
    </html>

    转载请注明出处:http://www.cnblogs.com/kerita/p/4948350.html 

  • 相关阅读:
    DVWA系列のSQL注射
    DVWA系列のCSRF&文件包含
    PHPSTORM+Xdebug配置
    Django 从入门到忘记学习笔记
    <双十一特辑> 模拟登录学校教务处爬取全校女生资料和头像
    zzcms7.2漏洞挖掘学习
    laravel5.3搭建过程中出现问题
    kali-linux简单学习
    linux学习二(小随笔)
    linux学习一
  • 原文地址:https://www.cnblogs.com/kerita/p/4948350.html
Copyright © 2011-2022 走看看