带你走进CSS定位详解

淩亂°似流年 2021-09-16 00:32 349阅读 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 条评论，349人围观）

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

相关阅读

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

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

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

相关带你走进MySQL

文章目录前言一、什么是MySQL数据库？二、MySQL 与其他关系型数据库的区别是什么？三、如何创建和数据库及表？数据库

﹏ヽ暗。殇╰゛Y/ 2023年10月10日 21:41/ 0 赞/ 46 阅读

相关【JavaWeb】带你走进Maven

文章目录 1 什么是Maven? 2 Maven 常用命令 3 Maven 生命周期 4 Maven 坐标详解 5 IDEA 导入 Mave

悠悠/ 2023年09月24日 15:56/ 0 赞/ 43 阅读

相关带你走进Redis

看了看网上大佬关于redis的各种见解，自己也统筹的整理一下。什么是redis? 1.Redis 是 C 语言开发的一个开源的（遵从 BSD 协议）高性能键值对（ke

亦凉/ 2023年07月20日 10:45/ 0 赞/ 6 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

目录

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

相关带你走进CSS定位详解

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

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