zoukankan      html  css  js  c++  java
  • position中static、relative、absolute、fixed的分析

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="utf-8" />
        </head>
        <body>
            <div>
                <p style="position:static;left:20px;top:300px;">一号模块</p>
                <p style="position:relative;left:20px;top:300px;">二号模块</p>
                <div style="position:absolute;left:300px;top:300px;90px;">
                    <p style="position:absolute;left:20px;top:-299px;">三号模块</p>
                </div>
                <p style="position:fixed">四号模块</p>
            </div>
        </body>
    </html>

    static 基于页面的文本流、页面中的元素默认是static

    relative 相对定位:对前文本的一个相对定位,前后元素不会占用该位置

    absolute 绝对定位:基于父级定位元素的一个绝对定位,其父级元素的定位必须是absolute或者relative,如果父级没有定位,则相对于body定位

    fixed 基于浏览器窗口定位

  • 相关阅读:
    Maven入门
    Windows Java安装
    cdh安装spark遇到的几个BUG
    SQL Server创建存储过程——动态SQL
    IDEA搭建scala开发环境开发spark应用程序
    liunx命令
    java常用 api
    缓存一致性问题
    git 命令
    nginx
  • 原文地址:https://www.cnblogs.com/zafuacm/p/4634288.html
Copyright © 2011-2022 走看看