css 绝对定位和相对定位

绝对定位

绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占据空间。

绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个网页。

实例1：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>元素定位实例</title><style>p {position: absolute;width: 120px;height: 120px;top: 100px;left: 0px;background-color: #c8edff;}div {position: absolute;width: 300px;height: 300px;top: 80px;left: 180px;border: 1px solid;}</style>
</head><body><h3>css绝对定位的应用</h3><hr><p>该段落是相对于页面定位，距离页面的顶部100像素，距离左边0像素</p><div>我是相对于页面定位的div元素，距离顶端80像素，距离左边180像素<p>该段落是相对于父元素div定位的，距离div元素的顶端100像素，距离div元素的左边0像素</p></div>
</body></html>

页面效果：

本实例包含两个样式完全相同的段落元素<p>，用于对比测试直接在页面中使用和嵌入已定位的<div>元素中两种情况。

相对定位

相对定位与绝对定位的区别在于它的参照点不是左上角的原点，而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置，也仍然从原始的起点处占据空间。

实例2：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>元素定位实例</title><style>div {width: 200px;height: 380px;border: 1px solid;margin-left: 50px;}p {width: 150px;height: 100px;background-color: #c8edff;}.left {position: relative;left: -50px;}.right {position: relative;left: 130px;}</style>
</head><body><h3>css相对定位的应用</h3><hr><div><p>正常段落的状态</p><p class="left">相对自己的正常位置向左偏移了50像素</p><p class="right">相对自己的正常位置向右偏移了130像素</p></div>
</body></html>

页面效果：

本实例包含了三个样式相同的段落元素<p>，用于对比测试相对定位的效果，并声明了一个带有实线边框效果的<div>元素包含这三个段落元素，以便对比段落元素的偏移量。

css 绝对定位和相对定位相关推荐

css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
css绝对定位与相对定位结合使用
css绝对定位与相对定位结合使用 1.绝对定位与相对定位绝对定位使元素的位置与文档流无关,因此不占据空间.这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普 ...
css绝对定位和相对定位实例。
先写一段简单代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
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中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...

css 绝对定位和相对定位

绝对定位

相对定位

css 绝对定位和相对定位相关推荐

最新文章

热门文章