css 相对定位 position relative

css 相对定位

这里相对的意思是，相对于一个元素没有定位前显示的位置，也就是原来显示的位置，

这个需要注意；

下面分两个部分来看相对定位：

第一部分：如何实现相对定位？

代码（1）：没有加定位的情况下

<!doctype html>

<html>

<head>

<style>

*{margin:0;padding:0;}

.abc{width:200px;height:200px;background-color:red;}

</style>

</head>

<body>

</body>

</html>

代码（2）:添加相对定位

<!doctype html>

<html>

<head>

<metacharset="utf-8">

<style>

*{margin:0;padding:0;}

.abc{width:200px;height:200px;background-color:red;

position:relative; top:100px; left:100px;}

</style>

</head>

<body>

<divclass="abc"></div>

</body>

</html>

两次显示效果对比：

相对定位相对的是原先的位置

第二部分：相对定位的坐标系是怎么样的？（以方向轴为正方向）

从上图看，相对的点始终是不会变化的，即原先位置的左上点是坐标原点；

变化的是坐标系的两轴；

当我们以不同的方向为正方向时，坐标系的方向是变化的，如上图；

css 相对定位 position relative相关推荐

相对定位——position: relative
相对定位--position: relative 一.代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
CSS 元素的定位之相对定位 position: relative
在CSS中,通过 position属性来对元素进行定位,可选的定位类型有 static | relative | absolute | fixed,默认值为 static,表示没有定位,元素保持在它原 ...
IE6 CSS bug: position:relative元素被overflow:auto/scroll元素包含
BUG描述: 页面中某DIV使用了position:relative,结合top=-25px等元素定位.在FF和IE7下表现正常,但是在IE6中该DIV会随鼠标滚动而滚动. 分析: 这是IE6一个已知 ...
十步图解CSS的position
2019独角兽企业重金招聘Python工程师标准>>> CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常 ...
详解div+css相对定位和绝对定位用法
1.定位的专业解释: (1)语法 position:static|absolute|fixed|relative 从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(ab ...
前端基础入门之css定位 position
定位的简介需求分析按照我们之前所学知识,可以怎么实现呢? 应该来说不难,很容易实现 .box2 {width: 200px;height: 200px;background-color: yell ...
CSS相对定位和绝对定位的区别
CSS中相对定位和绝对定位常常会使初入的新人感到困惑,我本人也是深受其害!今天详细的给大家说一下相对定位和绝对定位的区别,也是对自己的一种复习. 一.相对定位 position: relative; ...
前端——css相对定位，绝对定位，固定定位
文章目录相对定位 position: relative; 特性用途绝对定位 position: absolute; 绝对定位参考点单独盒子绝对定位参考点: 父辈元素设置了相对定位,则子元素绝对 ...

css 相对定位 position relative

css 相对定位 position relative相关推荐

最新文章

热门文章