带你走进CSS定位详解

googollee 发布于2019-04-23 13:29 / 1743人阅读

摘要：相对于其最近的一个定位设置的父对象进行绝对定位，可用。代码基本语法默认值，无特殊定位。代码相对定位相对定位生成相对定位的元素，相对于其它位置进行定位。结语结语带你走进定位详解，多试试，熟能生巧嘛

学习CSS相关知识，定位是其中的重点，也是难点之一，如果不了解css定位有时候都不知道怎么用，下面整理了一下关于定位属性的具体理解和应用方案。

一：定位

定位属性列表

position
top
bottom
right
left
z-index

position

基本语法：

position：static | absolute | fixed | relative

语法介绍：

static：默认值，无特殊定位。
absoulte：相对于其最近的一个定位设置的父对象进行绝对定位，可用left,right,top,bottom。
fixed：生成绝对定位的元素。
relative：生成相对定位的元素，可通过left,right,top,bottom属性设置相对于自身偏移位置。

代码：

div { position:relative; top:-4px }

bottom

基本特殊：定位元素

基本语法：bottom：auto | length

语法

auto：默认值，无特殊定位。
length：长度值 | 百分比，必须定义position的属性值为absolute或者relative才有效。

代码：

div { position:relative; bottom:6px; }

z-index

语法：z-index：auto | number
取值：auto：默认值，number：无单位的整数值，可负数。

代码：

div { position:absolute; z-index:5; width:6px; }

left

基本语法：left：auto | length

auto：默认值，无特殊定位。
length：长度值 | 百分比，必须定义position的属性值为absolute或者relative才有效。

代码：

div { position:relative; top:-3px; left:6px; }

top

基本语法：top：auto | length

auto：默认值，无特殊定位。
length：长度值 | 百分比，必须定义position的属性值为absolute或者relative才有效。

代码：

div { position:relative; top:-3px; left:5px;}

right

基本语法：right：auto | length

auto：默认值，无特殊定位。
length：长度值 | 百分比，必须定义position的属性值为absolute或者relative才有效。

代码：

div { position:relative; top:-3px; right:6px}

相对定位

relative生成相对定位的元素，相对于其它位置进行定位。

代码：

绝对定位

绝对定位相对于它的参照物移动位置，如果没有，默认为body为参照物。

结语

带你走进CSS定位详解，多试试，熟能生巧嘛~

GPU云服务器云服务器带你学c带你飞带你搭建阿里云服务器系统这篇文章手把手带你阅读Netty源码【附相对定位-绝对定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1958.html

前端修炼の道 | 带你走进迷人的 CSS 世界

摘要：每条属性声明实现对网页元素进行某种特定格式的设置，由一个属性和一个值组成，属性和值之间使用冒号连接，不同声明之间用分号分隔，所有属性声明放到一对大括号中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...

shiweifu 2019-08-23 13:58 评论0 收藏0
【进阶1-4期】JavaScript深入之带你走进内存机制

摘要：引擎对堆内存中的对象进行分代管理新生代存活周期较短的对象，如临时变量字符串等。内存泄漏对于持续运行的服务进程，必须及时释放不再用到的内存。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题是调用堆栈，今天是第4天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划...

不知名网友 2019-08-23 13:47 评论0 收藏0
【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免

摘要：本期推荐文章类内存泄漏及如何避免，由于微信不能访问外链，点击阅读原文就可以啦。四种常见的内存泄漏划重点这是个考点意外的全局变量未定义的变量会在全局对象创建一个新变量，如下。因为老版本的是无法检测节点与代码之间的循环引用，会导致内存泄漏。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题...

red_bricks 2019-08-23 13:47 评论0 收藏0
生产环节全流程透明可视，带你走进森普管材“数字孪生工厂”

摘要：目前森普管材年均生产能力高达万吨以上，位居西南区域前列，已连续两年获得政府采购塑料管道十大品牌。数字孪生系统可针对设备状态进行监控年是森普管材数字化改造的进阶之年。而这也成为了森普管材引入数字孪生系统的契机。如何用数字技术1:1还原生产环节，让设备运行、监控告警脱离人工经验，做到数据智能分析、工厂智慧生产？数字孪生可以给到你答案。数字孪生，也被称为数字映射、数字镜像。是指充分利用物理模型、传...

Tecode 2022-06-28 19:00 评论0 收藏0
【进阶1-3期】JavaScript深入之内存空间详细图解

摘要：进阶期理解中的执行上下文和执行栈进阶期深入之执行上下文栈和变量对象但是今天补充一个知识点某些情况下，调用堆栈中函数调用的数量超出了调用堆栈的实际大小，浏览器会抛出一个错误终止运行。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题是调用堆栈，今天是第3天。本计划一共28期，每期重点攻...

coordinate35 2019-08-23 13:47 评论0 收藏0