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. LODOP中设置设置图片平铺水印，超文本透明

    之前的博文:LODOP中平铺图片 文本项Repeat. 该博文中是平铺的图片,上面是文本.如果是图片add_print_image和add_print_text纯文本,这两个打印项设计的,可以直接通过 ...

  2. WCF之Windows宿主(可安装成服务自动并启动)

    WCF之Windows宿主(可安装成服务自动并启动) 创建解决方案WCFServiceDemo 创建WCF服务库(类库或WCF服务库)WCFService  ,添加引用System.ServiceMo ...

  3. linux ubuntu 网卡配置---固定IP

    需要修改/etc/network/interfaces和/etc/resolvconf/resolv.conf.d/base两个文件. 1) /etc/network/interfaces文件: 首先 ...

  4. .NET Core IOC AOP

    IOC简介 IOC思想 把类当做组件或服务来看待,组件内一定要高内聚,组件之间一定要低耦合,既然要保持低耦合,那就一定不要轻易的去new什么对象. 那组件之间的交互怎么处理呢?那最好的方式就是把new ...

  5. 将oracle关键字作为字段名

    对于关键字比如:Level.uid.group等 如果在数据库设计的时候,没有考虑oracle数据库的特殊性时,可能会使用关键字作为字段名,从而在建表的过程中,提示错误:ORA-00904: inva ...

  6. Python之匿名函数使用示例

    #!/usr/bin/env python # -*- coding:utf8 -*- # #匿名函数 # y = lambda x:x+1 # print(y(10)) name = 'AK' #一 ...

  7. stm32之中断响应优先级

    1)中断响应分为:自然优先级.抢占优先级.响应优先级. 2)抢占优先级和响应优先级,其实是一个中断所包含的两个优先级,其中前者是抢占优先级之间的级别划分,后者是相同抢占优先级的优先级别的划分. 中断A ...

  8. django使用pyecharts(1)----django加入echarts

    Django 中使用 pyecharts.一.普通django加入echarts Django 模板渲染 Step 0: 新建一个 Django 项目 $ django-admin startproj ...

  9. 微软商店一直安装不上Intel Media SDK DFP

    具体表现为一直安装失败,但是下载进度条一直在,无法去除. 此方法来自 https://answers.microsoft.com/en-us/windows/forum/all/error-code- ...

  10. io.ByteIO和open操作二进制流的区别（转）

    转自Stack Overflow:https://stackoverflow.com/questions/42800250/difference-between-open-and-io-bytesio ...