HTML&CSS基础-相对定位

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>相对定位</title>

        <style type="text/css">

            .box1{

                width: 200px;

                height: 200px;

                background-color: red;

            }

            .box2{

                width: 200px;

                height: 200px;

                background-color: yellow;

                /**

                 *     定位:

                 *         定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素

                 *        通过 position属性设置元素定位，常用有以下可选值:

                 *             static:

                 *                 默认值，元素没有开启定位

                 *             relative:

                 *                 开启元素的相对定位

                 *             absolute:

                 *                 开启元素的绝对定位

                 *             fixed:

                 *                 开启元素的固定定位(也是绝对定位的一种)

                 *

                 *

                 */

                /**

                 *     当元素的positon属性设置为relative时，则开启了元素的相对定位

                 *         1>.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化;

                 *         2>.相对定位是相对于元素在文档流中原来的位置进行定位;

                 *         3>.相对定位的位置是不会脱离文档流;

                 *         4>.相对定位会使元素提示一个层级，即它可以覆盖移动后的元素;

                 *         5>.相对定位不会改变元素的性值，块元素还是块元素，内联元素还是内联元素，因为它始终没有脱离文档流;

                 */

                position: relative;

                /**

                 *     当开启了元素的定位(position属性值是一个非static的值)时,可以通过left,right,top,bottom四个属性来设置元素的偏移量:

                 *         left:

                 *             元素相对于其定位位置的左侧偏移量

                 *         right:

                 *             元素相对于其定位位置的右侧偏移量

                 *         top:

                 *             元素相对于其定位的上边的偏移量

                 *         bottom:

                 *             元素相对于其定位位置下边的偏移量

                 *

                 *     通常偏移量只需要使用两个就可以对一个元素进行定位，一般会选择一个水平方向的偏移量和一个垂直方向的偏移量来为一个元素进行定位。

                 */

                left: 100px;

                top:200px

            }

            .box3{

                width: 200px;

                height: 200px;

                background-color: deeppink;

            }

            span{

                position: relative;

                /**

                 *     注意，我们没有显示使用"display: block;"将span变为快标签，span依旧是一个内联标签

                 */

                width: 100px;

                height: 200px;

                background-color: yellow;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

        <span>我是一个span标签</span>

    </body>

</html>

二.浏览器打开以上代码渲染结果

HTML&CSS基础-相对定位的更多相关文章

  1. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  2. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  3. CSS 基础总结

    CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...

  4. css基础内容

    css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...

  5. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  6. css 基础 - 3

    css 基础 - 3 20161128   一. 元素的距离计算 1,两个水平方向的容器s1,s2之间的距离计算为s: s = s1的margin-right + s2的margin-left(+默认 ...

  7. 两天学会css基础（二）

    接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...

  8. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

  9. 第五模块：WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

随机推荐

  1. HDU3853 LOOPS 期望DP基础题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3853 题目大意(只是大意,名字什么的可能和原题描述不一样~): 爱丽丝与华容道 题目描述 爱丽丝是一个 ...

  2. JS的正则表达式限定开始和结尾等测试

    []:匹配该区间内人任意一个字符^:匹配以某内容开头的$:匹配以模拟内容结尾的字符\w:测试是英文字母,数字,下划线.{}:设置区间,可出现几次到几次该文学习和测试几个正则的方法,测试结果如图,不加多 ...

  3. face_code业务信息不匹配

    face_code业务信息不匹配 检查获取 face code时的 appid, mch_id,out_trade_no以及可选的sub_mch_id ,  与 face pay 时是否一致.

  4. python的网络工具scapy

    文档 https://scapy.readthedocs.io/en/latest/api/scapy.sendrecv.html 阅读文档 https://blog.csdn.net/Al_xin/ ...

  5. maven 中配置多个mirror的问题

    公司搭建的maven私服做镜像,有使用aliyun的镜像,还有其他地方的, 默认情况下配置多个mirror的情况下,只有第一个生效.那么我们可以将最后一个作为默认值,前面配置的使用环境变量动态切换. ...

  6. 常见问题:MySQL/B+树

    平衡二叉树 此前讲红黑树时也提到了平衡二叉树,红黑树和AVL树都是能保证树不退化的平衡二叉树,平衡二叉树采用二分思想组织数据,能大大提高单点查找数据的效率,其组装过程略. 作为对比,此处也列出平衡二叉 ...

  7. 读取以key=value形式存储的txt文件

    代码片段(假设只有3个key=value): public static void main(String[] args) throws IOException { BufferedReader br ...

  8. Android StickyListHeadersListView头部悬停 分组列表实现

    最近在做分组列表,头部悬停的效果,在github上就搜到了StickyListHeaders(https://github.com/emilsjolander/StickyListHeaders)这个 ...

  9. 双链表的基本实现与讲解（C++描述）

    双链表 双链表的意义 单链表相对于顺序表,确实在某些场景下解决了一些重要的问题,例如在需要插入或者删除大量元素的时候,它并不需要像顺序表一样移动很多元素,只需要修改指针的指向就可以了,其时间复杂度为 ...

  10. 记一次EFCore类型转换错误及解决方案

    一  背景 今天在使用EntityFrameworkCore 查询的时候在调试的时候总是提示如下错误:Unable to cast object of type 'System.Data.SqlTyp ...