一、static定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .c1 {

            width: 100px;

            height: 100px;

            background: red;

            position: static;

            top: 100px;

            left: 100px;

        }

    </style>

</head>

<body>

    <div class="c1"></div>

</body>

</html>

　　

二、relative定位

相对定位元素的定位是相对其左上顶点的正常位置进行定位,定位后元素还会占据原来的空间。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .c1,.c2,.c3 {

            width: 100px;

            height: 100px;

        }

        .c1 {

            background: red;

            position: relative;

            left: 100px;

        }

        .c2 {

            background: green;

        }

        .c3 {

            background: blue;

        }

    </style>

</head>

<body>

    <div class="c1"></div>

    <div class="c2"></div>

    <div class="c3"></div>

</body>

</html>

　

三、absolute定位

定位后,元素脱离文档流,不再占据原来的空间。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于<html>

1.父元素设置为relative定位,子元素设置absolute定位,相对其父元素进行定位。

<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>Document</title>

　　　　<style type="text/css">

　　　　　　* {

　　　　　　　　margin: 0;

　　　　　　　　padding: 0;

　　　　　　　}

　　　　　　.c1 {

　　　　　　　　width: 300px;

　　　　　　　　height: 300px;

　　　　　　　　background: red;

　　　　　　　}

　　　　　　.c2 {

　　　　　　　　width: 200px;

　　　　　　　　height: 200px;

　　　　　　　　background: green;

　　　　　　　　position: relative;

　　　　　　　}

　　　　　　.c3 {

　　　　　　　　width: 100px;

　　　　　　　　height: 100px;

　　　　　　　　background: blue;

　　　　　　　　position: absolute;

　　　　　　　　bottom: 0;

　　　　　　　　right: 0;

　　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div class="c1">

　　　　　　<div class="c2">

　　　　　　　　<div class="c3"></div>

　　　　　　</div>

　　　　</div>

　　</body>

</html>

　　

2.祖先元素设置为relative定位,后代元素设置absolute定位,相对其祖先元素进行定位。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .c1 {

            width: 300px;

            height: 300px;

            background: red;

            position: relative;

        }

        .c2 {

            width: 200px;

            height: 200px;

            background: green;

        }

        .c3 {

            width: 100px;

            height: 100px;

            background: blue;

            position: absolute;

            bottom: 0;

            right: 0;

        }

    </style>

</head>

<body>

    <div class="c1">

        <div class="c2">

            <div class="c3"></div>

        </div>

    </div>

</body>

</html>

　　

3.元素没有已定位的祖先元素，它的位置相对于<html>。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*这里不清除body的外边距,是为了能够区分html和body元素*/

　　　　 html,body {

　　　　　　　width:100%;

　　　　　　　height:100%;

　　　　　}

        html {

            border: 3px solid yellow;

        }

        body {

            border: 3px solid purple;

        }

        .c1 {

            width: 300px;

            height: 300px;

            background: red;

        }

        .c2 {

            width: 200px;

            height: 200px;

            background: green;

        }

        .c3 {

            width: 100px;

            height: 100px;

            background: blue;

            position: absolute;

            bottom: 0;

            right: 0;

        }

    </style>

</head>

<body>

    <div class="c1">

        <div class="c2">

            <div class="c3"></div>

        </div>

    </div>

</body>

</html>

　　

四、fixed定位

元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .c1 {

            width: 100px;

            height: 100px;

            background: red;

            position: fixed;

            bottom: 0;

            right: 0;

        }

    </style>

</head>

<body>

    <div class="c1"></div>
　　<!--这里用br元素产生滚动条-->

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

</body>

</html>

CSS的四种定位的参照物的更多相关文章

  1. CSS的4种定位方式比较

    CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed 元素flow, overlap 相对参照物: 能否用offset( top, left, ...

  2. CSS四种定位及应用

    定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...

  3. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

  4. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  5. CSS的四种引入方式

    1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href=& ...

  6. CSS的五种定位方式

    CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...

  7. HTML中引入CSS的四种常用方法及各自的缺点

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用.格式如下: ...

  8. sess文件编译输出css的四种方式以及使用

    sess文件输出css有下面四种方式: :nested(嵌套) :compact(紧凑) :expanded(展开) :compressed(压缩) 如何使用: sass --watch style. ...

  9. 有关于css的四种布局

    四种布局 (1).左右两侧,左侧固定宽度200px, 右侧自适应占满. (2).左中右三列,左右个200px固定,中间自适应占满. (3).上中下三行,头部200px高,底部200px高,中间自适应占 ...

随机推荐

  1. JVM系列2：HotSpot虚拟机对象

    1.对象创建过程: ①.类加载检查:当java虚拟机遇到一条new指令时,首先会去检查该指令的参数能否在常量池中定位到这个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析.初始化过,如果没 ...

  2. leetcode-easy-string- 125 Valid Palindrome

    mycode   9.62% class Solution(object): def isPalindrome(self, s): """ :type s: str :r ...

  3. P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…

    P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…   大写祖母转数字  -64   发现dalao   #include<bits/stdc++.h> usi ...

  4. 初始化EPT

    struct eptp_bits { unsigned memory_type :; /* 0: UC uncacheable, 6: WB writeback */ unsigned pagewal ...

  5. 代码实现:编写一个函数，输入n为偶数时，调用函数求1/2+1/4+...+1/n,当输入n为奇数时，调用函数1/1+1/3+...+1/n

    import java.util.Scanner; //编写一个函数,输入n为偶数时,调用函数求1/2+1/4+...+1/n,当输入n为奇数时,调用函数1/1+1/3+...+1/n public ...

  6. 【flask】表单-上传文件

    依赖: flask-wtf upload_case.html <!DOCTYPE html> <html lang="en"> <head> & ...

  7. loadrunner设置Analysis分析时去掉思考时间

    在进行对loadrunner进行执行脚本的情况下,那么就需要在脚本中进行添加为思考时间,这样才更符合人为的脚本时间,那么在进行执行压力的过程中,思考时间是需要开启的,完成之后为了便于分析那么就需要把思 ...

  8. WPF 使用Task代替ThreadPool和Thread

    一:Task的优势 ThreadPool相比Thread来说具备了很多优势,但是ThreadPool却又存在一些使用上的不方便.比如: 1: ThreadPool不支持线程的取消.完成.失败通知等交互 ...

  9. Selenium 2自动化测试实战19（下载文件）

    一.下载文件 webDriver允许设置默认的文件下载路径,也就是说,文件会自动下载并且存放到设置的目录中.下面以火狐浏览器为例,执行文件的下载. #downfile.py # -*- coding: ...

  10. Delphi实现带有格式的Excel导出功能

    功能预览 运行预览 模板样式 存储返参 导出的Excel 2. 代码实现 //执行sql的函数 procedure TForm1.GetReportData(astrsql:string); var ...