相对定位：position:relative

特点：a.相对于自己原来位置的定位，以自己的左上角为基准。

b.相对定位原来的位置仍然算位置，不会出现浮动现象。

以下为初始位置：（可以看出设置margin和position的区别）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相对定位</title>

    <style>

* {

  margin: 0;

  padding: 0;

}

.top {

    height: 100px;

    width: 100px;

    margin: 50px;

    background-color: pink;

    /* position: relative;

    top:100px;

    bottom: 100px; */

}

 /* .bottom {

    height: 100px;

    width: 120px;

    background-color: yellow;

}    */

    </style>

</head>

<body>

    <div class="top"></div>

    <div class="bottom"></div>

</body>

</html>

　效果图如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相对定位</title>

    <style>

* {

  margin: 0;

  padding: 0;

}

.top {

    height: 100px;

    width: 100px;

    margin: 50px;

    background-color: pink;

    /* 设定相对位置 */

    position: relative;

    top:100px;

    bottom: 100px;

}

 /* .bottom {

    height: 100px;

    width: 120px;

    background-color: yellow;

}    */

    </style>

</head>

<body>

    <div class="top"></div>

    <div class="bottom"></div>

</body>

</html>

设定相对定位之后的效果图：

top设置相对定位，bottom不设置定位：

初始状态如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相对定位</title>

    <style>

* {

  margin: 0;

  padding: 0;

}

.top {

    height: 100px;

    width: 100px;

    background-color: pink;

    /* 设定相对位置

    position: relative;

    top:100px;

    bottom: 100px; */

}

 .bottom {

    height: 100px;

    width: 100px;

    background-color: yellow;

}

    </style>

</head>

<body>

    <div class="top"></div>

    <div class="bottom"></div>

</body>

</html>

　效果图如下：

设定了相对定位后：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相对定位</title>

    <style>

* {

  margin: 0;

  padding: 0;

}

.top {

    height: 100px;

    width: 100px;

    background-color: pink;

    /* 设定相对位置 */

    position: relative;

    top:100px;

    bottom: 100px;

}

 .bottom {

    height: 100px;

    width: 120px;

    background-color: yellow;

}

    </style>

</head>

<body>

    <div class="top"></div>

    <div class="bottom"></div>

</body>

</html>

效果图如下：

day6 相对定位：position:relative的更多相关文章

  1. 层模型--相对定位(position:relative)

    如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...

  2. 相对定位position: relative;

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  4. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  5. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  6. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  7. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  8. css position relative obsolution

    层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...

  9. position relative

    position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static) 如果你想让这个#demo里的一个div#sub相对于 ...

随机推荐

  1. Vue 原生动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Python--day38--JoinableQueue解决生产者消费者模型

    ############################# # 在消费者这一端: #每次获取一个数据 #处理一个数据 #发送一个记号:标志一个数据被处理成功 #在生产者这一端: #每一次生成一个数据 ...

  3. vuex 快速上手，具体使用方法总结（含使用例子）

    网上有关vuex的文章很多,但有些比较复杂,这篇文章能让你快速使用vuex: vuex 用处:管理全局状态(类似全局变量,每个组件都能访问到) vuex 用法: //下面是一个js文件,用最简单最全的 ...

  4. jQuery---鼠标滚轮控制div横向滚动条左右移动

    HTML <div class="table-responsive"> <div class="fhtable" style="wi ...

  5. 【2016福建省夏令营Day1】数据结构

    Problem 1 楼房(build.cpp/c/pas) [题目描述] 地平线(x轴)上有n个矩(lou)形(fang),用三个整数h[i],l[i],r[i]来表示第i个矩形:矩形左下角为(l[i ...

  6. c# 写个简单的爬虫。注：就一个方法，没有注释，自己猜~哈哈

    和我,在成都的街头走一走,哦~喔~哦~ public JsonResult GetHtml() { string url = "http://www.xxxxxxxxxxxxxxxxxx.c ...

  7. Linux： 在某个路径及其子目录下查找所有包含“hello abcserver”字符串的文件。

    find /etc -name “*” | xargs grep “hello abcserver” 在 / 及其子目录下查找所有包含UNEXPECTED_SCHEMA find /  -name * ...

  8. mysql:数据库与实例的区别

    题记:最近想更深入的了解mysql,所以买了一些书在学习,趁着这个机会开个坑,整理一下一些我认为重要的知识点. 刚工作那会经常能听到组长提到实例这个词,一开始我以为是服务器... 数据库(databa ...

  9. 【题解】P5462 X龙珠

    [题解]P5462 X龙珠 赛题 #B: P5462 X龙珠 | 满分: 100分 发一个set做法 维护两个set,一个按照顺序排序,一个按照值排序. 每次从大往小取,问题就变成了判断这个最大值后面 ...

  10. VS从标准输入读入文件

    1.点击[生成],在对应目标平台[64 or 32]文件夹下的[release]或[debug]下找到可执行文件 2.读取销售记录文件 1)打开cmd,将销售记录文件和可执行文件放在同一文件夹下 2) ...