相对定位：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. windows环境下pgsql的安装与使用

  2. WPF 使用 Composition API 做高性能渲染

    在 WPF 中很多小伙伴都会遇到渲染性能的问题,虽然 WPF 的渲染可以甩浏览器渲染几条街,但是还是支持不了游戏级的渲染.在 WPF 使用的 DX 只是优化等级为 9 和 DX 9 差不多的性能,微软 ...

  3. webpack打包前删除之前的所有文件

    安装插件: npm install --save-dev clean-webpack-plugin 在webpack.prod.conf.js 中引入:  const { CleanWebpackPl ...

  4. vue 模块化 路由拆分配置

    一.普通路由配置 通常我们编写vue路由配置都会写在 /src/router/index.js 这个文件下.但是,随着我们的vue项目变得越来越大后,路由也随之变得越来越多,出现的问题就是我们所有的路 ...

  5. Spring Security学习笔记-自定义Spring Security过滤链

    Spring Security使用一系列过滤器处理用户请求,下面是spring-security.xml配置文件. <?xml version="1.0" encoding= ...

  6. 【NOIP数据结构专项】单调队列单调栈

    [FZYZ P1280 ][NOIP福建夏令营]矩形覆盖 Description 有N个矩形,矩形的底边边长为1,且均在X轴上,高度给出,第i个矩形的高为h[i],求最少需要几个矩形才能覆盖这个图形. ...

  7. C++虚继承初识

    struct Employee { ... }; struct Manager : Employee { ... }; struct Worker : Employee { ... }; struct ...

  8. 小白进阶之路-python基本运算符

    1.算数运算符(+.-.*./.%.**(幂 二次方.三次方).//(地板除,返回商的整数部分) 2.比较运算符(==.!=.<>(不等于).>.<.>=.<=) ...

  9. Spring Boot 配置文件中使用变量、使用随机数

    参数引用 在application.properties中的各个参数之间可以直接通过是使用placeHolder的方式进行引用,如: book.author=Clark book.name=C++ b ...

  10. 认识Web应用框架

    Web应用框架 Web应用框架(Web application framework)是一种开发框架,用来支持动态网站.网络应用程序及网络服务的开发.类型可以分为基于请求(request-based)的 ...