[Web 前端] 019 css 定位之绝对定位与相对定位

1. 关于定位

  • 我们可以使用 css 的 position 属性来设置元素的定位类型

postion 的设置项如下

设置项 释义
relative 生成相对定位元素
元素所占据的文档流的位置不变
元素本身相对文档流的位置进行偏移
absolute 生成绝对定位元素
元素脱离文档流
不占据文档流的位置
可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位
如果找不到,则相对于 body 元素进行定位
fixed 生成固定定位元素
元素脱离文档流
不占据文档流的位置
可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位
static 默认值,没有定位
元素出现在正常的文档流中
相当于取消定位属性或者不设置定位属性

简单地说

  1. relative

    • 相对定位
    • 不脱离文档流
    • 相对于自己本身的位置进行定位
  2. absolute
    • 绝对定位
    • 脱离文档流
    • 位置相对于已定位的父级
    • 如果没有父级,或父级没有定位,那么相对于文档 (body)的 00 点
  3. fixed
    • 固定定位
    • 脱离文档流
    • 位置相对于浏览器窗口 进行定位

少废话,上例子

例 1

<!-- 例1 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
    </head>
    <body>
        <div class="box1">box1</div>
    </body>
</html>
<!-- 例1.1 -->
*{
    margin: 0;
    padding: 0
}
div{
    width: 200px;
    height: 200px;
}
.box1{
    background: red;
}
  • 效果截图 1

<!-- 例1.2 -->
*{
    margin: 0;
    padding: 0
}
div{
    width: 200px;
    height: 200px;
}
.box1{
    background: red;
    margin:0 200px;     /* 加了这句 */
}
  • 效果截图 2

<!-- 例1.3 -->
*{
    margin: 0;
    padding: 0
}
div{
    width: 200px;
    height: 200px;
}
.box1{
    background: red;
    /* 通过 position: 设置元素的定位
        relative: 相对定位
            以元素本身位置为参考点进行偏移
            不会脱离文档流 */
    position: relative;
    left: 300px;
    top: 100px;
}
  • 效果截图 3

<!-- 例1.4 -->
*{
    margin: 0;
    padding: 0
}
div{
    width: 200px;
    height: 200px;
}
.box1{
    background: red;
    margin:0 200px;
    /* 通过 position: 设置元素的定位
        relative: 相对定位
            以元素本身位置为参考点进行偏移
            不会脱离文档流 */
    position: relative;
    left: 300px;
    top: 100px;
}
  • 效果截图 4

例 2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
    </head>
    <body>
        <div class="box1">box1</div>
        <div class="wrap">
            <div class="box2">box2</div>
        </div>
    </body>
</html>
*{
    margin: 0;
    padding: 0
}
div{
    width: 200px;
    height: 200px;
}
.wrap{
    width: 500px;
    height: 300px;
    margin: 0 100px;
    border: 2px solid;
    /* position: relative; 添加定位属性,若加上这一句,效果见交过截图 6 */
}
.box1{
    background: red;
    margin:0 200px;
    position: relative;
    left: 200px;
    top: 100px;
}
.box2{
    background: green;
    /* 设置绝对定位
        position: absolute;
            以有定位属性的父级为参考点进行偏移,
            如果父级元素没有定位属性,继续向上一级元素找
            如果找到,就以该级元素为参考进行偏移,
            如果找不到,一直想向上寻找,直到 body 为止
        会脱离文档流,不占文档位置 */
    position: absolute;
    left: 100px;
    top: 100px;
}
  • 效果截图 5

  • 效果截图 6

2. 定位元素的特性

  • 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

3. 定位元素的层级

  • 定位元素是浮动在正常的文档流之上的
  • 可以用 z-index 属性来设置元素的层级

少废话,上例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
    </head>
    <body>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </body>
</html>
*{
    margin: 0;
    padding: 0
}
div{
    width: 200px;
    height: 200px;
}
.box1{
    background: red;
    position: relative;
    left: 100px;
    top: 100px;

    /* 设置定位的层级 谁在后面定位谁就在上面
        改变层级使用 z-index:
    z-index: 2; 加上这句,效果见效果截图 8 */
}
.box2{
    background: green;
    position: absolute;
    left: 100px;
    top: 100px;
}
  • 效果截图 7

  • 效果截图 8



参考:北京图灵学院的 Web 前端公开课

原文地址:https://www.cnblogs.com/yorkyu/p/10804481.html

时间: 2024-10-25 06:31:15

[Web 前端] 019 css 定位之绝对定位与相对定位的相关文章

[Web 前端] 020 css 定位之绑定定位

绑定定位 少废话,上例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="./static/CSS/test.css"> </head> <

谈谈Web前端工程师的定位

原文地址:http://www.360doc.com/content/10/0708/17/1277406_37692580.shtml 2010-07-08  锋子chans   阅 1116  转 13 先给前端工程师的工作下个一句话定义:运用前端技术,实现体验的良好传达.如果在前面加上 Web,那么是针对 Web 这个领域的,主要是互联网,也可以将移动通信网络和其他传媒网络(比如IPTV)包含在内,因为其理念是一致的. 现在要在未毕业的学生中找到一个符合技能条件的 Web 前端工程师可以说

好程序员web前端分享CSS文件引用的最优方法

好程序员web前端分享CSS文件引用的最优方法,在html总引入css文件的方法: 1链接式: 2导入式: 区别: 使用链接式时,会在加载页面主体部分之前加载css文件,这样现实出来的页面一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成之后再装载css文件,对于有的浏览器来说,在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果.从浏览者的感受来说,这是使用导入式的一个缺陷.** 链接式比导入式快. 当有多个文件链接到页面的时候会导致

好程序员web前端分享css常用属性缩写

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 pr

1+x 证书 Web 前端开发 css 专项练习

官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/ 原文地址:https://www.cnblogs.com/zhsh666/p/11967944.html

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

web前端开发——css

一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得美观: 将HTML页面的内容与样式分离: 提高web开发的工作效率. 3.css的优势 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使页面布局更加灵活 减少网页的代码量,增加网页浏览器速度,节省网络带宽 运用独立页面的css,有利于网页被搜索引擎收录 二.css语法 css语法分为两部分:

web前端之css快速入门

css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 css基础语法 css规则由两个主要部分构成:选择器,以及一条或多条声明selector选择器 declaration声明 selector {declaration1; declaration2

Web前端--Html/Css

总结一下今天学的内容,虽然以前学过,但是再学感觉还是有需要学习的地方. Web前端–Html: 超文本标记语言(HyperText Markup Language) 1.整体骨架 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> </body> </ht