css绝对定位和相对定位实例。

先写一段简单代码：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</body>

</html>

.try{

width: 100px;

height: 100px;

background-color: #f40;

}

.try1{

width: 100px;

height: 100px;

background-color:navajowhite;

top: 0px;

}

.try2{

width: 50px;

height: 50px;

background-color:red;

/* position: relative; */

border: 1px solid red;

bottom: 50px;

}

先将position:relation相对定位注释, 然后取消注释，既加上相对定位，

可以看到。可以看到。

这里设置的是bottom:50px; 然而此时try2是相对于父级try1,由此可见，此时的bottom是我们try2上边框下部，与父级上边框下部的距离。同时测试了一下right也是一样的道理。

然后将relation改为absolute（改为绝对定位）, bottom改为right；可以看到。

相对定位是相对于页面的。绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

而如果在.try1中加入relative, 如果在.try1中加入absolution,

可以看到可以看到

由此可见绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序（就像车在高架桥上一样桥上和桥下互不影响）。

而相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框（不能撞车！）。

css绝对定位和相对定位实例。相关推荐

css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
css绝对定位与相对定位结合使用
css绝对定位与相对定位结合使用 1.绝对定位与相对定位绝对定位使元素的位置与文档流无关,因此不占据空间.这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普 ...
css 绝对定位和相对定位
绝对定位绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不占据空间. 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素.如果当前需要被定位的元素没 ...
CSS 绝对定位与相对定位
前几天遇到了上班的第一个难题,项目想要实现这样的效果: 一开始我天真地以为只要设置边框加上圆圈的图片就可以了,然而按这种方法实际上实现的效果是这样的: 实际效果比视觉图上下多了两截... 但是,聪明如 ...
CSS绝对定位和相对定位
绝对定位和相对定位(可以直接看总结) 1. 概念 2. 例子 3. 总结 4. 常用前言: 一直觉得位置放的对就行了,放不对的top bottom和left right乱调,调对了却不知道为什么 ...
CSS——绝对定位与相对定位
文章目录前言一.什么是定位? 二.常用的四种定位方法 1.相对定位 2.绝对定位 3.固定定位 4.粘滞定位总结前言本文主要介绍了CSS中常用的四种定位方法一.什么是定位? 定位是一种更加 ...
CSS绝对定位和相对定位的百分比计算以及宽高计算
参考文章:relative 和 absolute 元素的百分比定位.CSS进阶--绝对定位元素的宽高是如何定义的一.设置top.right.bottom.left的值为百分比如果没有设置top.r ...
CSS相对定位,固定定位,绝对定位实例方法和实例
1CSS相对定位方法实例: 当容器的position属性值为relative时,这个容器即被相对定位了.相对定位和其他定位相似,也是独立出来浮在上面.不过相对定位的容器的top(顶部).bottom( ...
CSS中的绝对定位和相对定位
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站点击跳转浏览. 1,理解绝对定位和相对定位要理解定位你要先理解文档流,在文档流中相对定位的元素占有位 ...

css绝对定位和相对定位实例。

css绝对定位和相对定位实例。相关推荐

最新文章

热门文章