一、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. java期末总结

    java期末总结: java语言特点:1.简洁有效 2.可移植性 3.面向对象 4.解释型 5.适合分布式计算 6.拥有较好的性能 7.健壮.防患于未然 8.具有多线程处理能力 9.具有较高的安全性 ...

  2. MSO Transponder 页面开发思路

    1. 确定Transponder开发页面分类,定义负责模块 2. 定义模块页面布局 3. 选择页面各数据对应的控件类型 4. 选定控件对应set/get所用方式 快捷键链接设置: http://www ...

  3. Watir单元库

    http://www.cnblogs.com/Javame/p/4045229.html test: #require 'net/http' #require 'uri' #url = URI.par ...

  4. CentOS 6.5 安装OSA监控精灵监控主机

    OSA监控是一个开源的图形化免费好用的监控,安装之前首先要配置好PHP环境, yum install httpd mysql mysql-server php-mysql php* -y 编辑http ...

  5. 用layui的 form.on提交表单如何禁止刷新页面

    答:只需要在 form.on里面的底部添加return false;即可 例如: form.on('submit(component-form-demo1)', function(data){ var ...

  6. activiti随笔记录

    核心组件介绍 关键对象 1.      Deployment:流程部署对象,部署一个流程时创建. 2.      ProcessDefinitions:流程定义,部署成功后自动创建. 3.       ...

  7. Elastic Stack学习

    原文链接 Elastic Stack简称ELK,在本教程你将学习如何快速搭建并运行Elastic Stack. 首先你要安装核心开源产品: Elasticsearch: Kibana: Beats: ...

  8. 【HANA系列】SAP HANA计算视图中的RANK使用方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA计算视图中的RA ...

  9. 基于LVM(逻辑卷管理)的快照原理

    一.为甚么不管多大的逻辑卷进行备份,快照都会在几秒之内完成? 快照在拍摄的一瞬间,系统会记录那个时间点逻辑卷的状态.数据等,此时拍下的快照相当于一张白纸.如图所示 快照做好后,随着时间的推移,源卷里的 ...

  10. HDU 2100 Lovekey (26进制大数、字符串)

    Lovekey Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...