带你走进CSS定位详解

淩亂°似流年 2021-09-16 00:32 308阅读 0赞

![标题图][1240]

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

## 一：定位 ##

#### 定位属性列表 ####

*  position
 *  top
 *  bottom
 *  right
 *  left
 *  z-index

## position ##

基本语法：

> position：static | absolute | fixed | relative

语法介绍：

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

代码：

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

## bottom ##

基本特殊：定位元素

基本语法：bottom：auto | length

## 语法 ##

1.  auto：默认值，无特殊定位。
2.  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

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

代码：

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

## top ##

基本语法：top：auto | length

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

代码：

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

## right ##

基本语法：right：auto | length

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

代码：

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

## 相对定位 ##

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

代码：

<style type="text/css"> #box1 { margin: 10px; width: 100px; height: 100px; background-color: blue; } #box2 { margin: 10px; width: 100px; height:100px; background-color: red; /*position: relative; left: 100px; top: 100px;*/ } </style>
    
    <div id="box1"></div>
    <div id="box2"></div>

## 绝对定位 ##

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

## 结语 ##

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

![送❤][1240 1]

[1240]: /images/20210724/77ee26955f0449daa74d9cc863acdf96.png
[1240 1]: /images/20210724/b9a5076afd9342949dad8cb5bb22ad7a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，308人围观）

还没有评论，来说两句吧...

相关阅读

相关一文带你走进网络编程

网络编程什么是网络编程: 就是用来实现网络互通的不同计算机运行程序之间进行数据的交换的编程网络模型 OSI(模型):七层协议 <table> <t

た入场券/ 2024年03月31日 14:05/ 0 赞/ 30 阅读

相关带你走进React路由的世界

介绍对路由进行管理。在传统的没有使用路由情况下，通过读取url中的hash值来进行识别加载的组件 react路由则将路由解析，映射关系进行了封装，通过配置进行管理

短命女/ 2022年10月16日 08:51/ 0 赞/ 138 阅读

相关一个项目带你走进软件测试2

文章目录前言一、前期准备二、第一阶段 1.熟悉软件项目 2.阅读测试计划三、第二阶段 1.根据需求规

忘是亡心i/ 2022年09月11日 03:17/ 0 赞/ 243 阅读

相关带你走进 Rust 和 WebAssembly 的世界

Why Rust 在进行正式的分享之前，先来说一说为什么，要学习 Rust 这一门在广义上归属于后端的语言，以及它能带给我们什么，未来有什么前景。 1. 与Ja

小鱼儿/ 2022年09月10日 09:24/ 0 赞/ 362 阅读

相关 47 张图带你走进浏览器的世界！

每个开发者（尤其是前端工程师）或多或少会跟浏览器打交道，那么你们有没有想过去深入了解浏览器呢？无论是因为好奇还是为了面试，相信你们一定在网上搜过不少关于浏览器相关的知识和文章，

╰半橙微兮°/ 2022年08月29日 12:59/ 0 赞/ 178 阅读

相关【WebService】带你走进webservice的世界

欢迎关注我新搭建的博客：[http://www.itcodai.com/][http_www.itcodai.com] > WebService系列文章： > [【Web

不念不忘少年蓝@/ 2022年07月20日 12:27/ 0 赞/ 201 阅读

相关硅谷产品大师带你走进产品新时代

转载于:[http://www.programmer.com.cn/10955/][http_www.programmer.com.cn_10955] Marty Ca

曾经终败给现在/ 2022年06月13日 00:42/ 0 赞/ 137 阅读

相关带你走进程序猿的内心世界

> 曾经在QQ空间里转过一篇文章,关于程序猿的爱情故事爱是需要回报的，就象周转资金一样，没有回报的爱是苍白的，脆弱的。　　当编程之于爱情就如鱼之于熊掌般不可兼得时

清疚/ 2022年05月10日 05:30/ 0 赞/ 192 阅读

相关大白话5分钟带你走进人工智能-目录

目录

素颜马尾好姑娘i/ 2021年12月24日 02:13/ 0 赞/ 215 阅读

相关带你走进CSS定位详解

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

淩亂°似流年/ 2021年09月16日 00:32/ 0 赞/ 309 阅读