AI 助理
备案控制台
开发者社区 云原生 文章 正文

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用

2025-10-09 21
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
可观测监控 Prometheus 版，每月50GB免费额度
任务调度 XXL-JOB 版免费试用，400 元额度，开发版规格
Serverless 应用引擎免费试用套餐包，4320000 CU，有效期3个月
简介： position定位（核心）我们讲盒模型的时候，提到了3个属性可以用来控制页面排版。三大属性：position属性，display属性，float属性。position 属性控制页面上元素间的位置关系。display 属性控制页面元素是否显示或者是堆叠还是并排显示。float 属性提供控制方法。通过float这种控制方法，可以实现多栏布局，导航菜单等等。position属性是干嘛用的？怎么用？有哪些属性值？position属性控制页面上元素间的位置关系，也就是排版。怎么用？要知道怎么用

背景

background-color:背景颜色。

background-image:用于设置背景图片。

注意：如果同时设置背景颜色(background-color)
和背景图片(background-image)，背景颜色会被背景图片覆盖。该属性

需要使用url()函数指定图片地址，图片的地址既可以是相对的，也可以是绝对的。

background-repeat:用于设置对象的背景图片是否平铺(重复显示)。
在指定该属性之前，必须先指定背景图片(background-image)
该属性有4个值。

  • repeat(纵横同时重复)
  • no-repeat(不重复)
  • repeat-x(x轴方向重复)
  • repeat-y(y轴方向重复)

background-position:用于控制背景图片的位置。
background-position有5个关键字值分别是：

  • top,left,bottom,right,center。

可以通过任意两个关键字组合来定位。
也可以通过百分比来定位。

  • 例如：background-position: 50% 50%.
    第一个百分比对应横坐标，第二个百分比对应纵坐标。

background-attachment:设置背景图片是随对象内容滚动还是固定。

  • 在指定该属性之前，必须先指定背景图片。

该属性的两个值：

  • scroll(默认)
  • fixed(固定)

background:这是一个复合属性，可以同时设置背景颜色、背景图片、背景重复、背景位置等。

CSS3还可以给元素背景添加多个背景图片。

示例

  • body
    <body>
  <div class="divcolor"></div>
  <div class="divone"></div>
  <div class="divtwo"></div>
  <div class="divone"></div>
  <div id="divfive"></div>
</body>
    ```css
    .divcolor{
    width:800px;
    height:30px;
    background-color:#900;
    margin:0px auto;
    }
    .divone {
    width: 800px;
    height: 400px;
    border: 3px solid #900;
    margin:20px auto;
    background-image:url(image/flower.gif), 
          url(image/haha.png), url(image/backgroundimage.jpg);
    background-repeat:repeat-y, repeat-x, repeat;
    background-position:center top, left center, left top;

}
.divtwo {
width: 800px;
height: 400px;
border: 3px solid #900;
margin:20px auto;
background-image:url(image/backgroundimage.jpg);
background-attachment:fixed;
}

divfive { 

width: 800px;
height: 400px;
border: 3px solid #900;
margin:20px auto;
background:#900 url(image/flower.gif) repeat-x center;

}

# 浮动和定位
## 浮动
**在页面布局时，一般用float属性来实现多栏布局，导航菜单等等。**
浮动(float)的三个属性值：
- `left(左浮动)`
- `right(右浮动)`
- `none`

浮动的意思就是把元素从常规的文档流中拿出来，浮动的元素在脱离了常规的文档流之后，
原来紧跟其后的元素就会在空间允许的情况下，向上提升到浮动元素平起平坐。

> **如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear的属性值。**

- 浮动(float)的三个属性值：left(左浮动),right(右浮动),none.
- clear（清除浮动）的三个属性值：left（清除左侧浮动）,right,both
---
### 示例1
- body
```html
<body>
    <div class="divone"></div>
    <div class="divtwo"></div>
    <div class="divthree"></div>
</body>
  • css
    ````css
    div {
    width:300px;
    height:200px;

}
.divone{
float:left;
background:#900;
}
.divtwo{
float:left;
background:#BD19D3;
}
.divthree{
float:left;
background:#6D7DDC;
}

### 示例2
- body
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>float 应用----多栏布局</title>
</head>

<body>
    <div class="header"></div>
    <div class="content">
        <div class="content-one"></div>
        <div class="content-two"></div>
        <div class="content-three"></div>
    </div>
    <div class="footer"></div>
</body>
</html>
  • css
    .*{
     
  margin:0;
  padding:0;
}
.header{
     
  width:900px;
  height:80px;
  margin:0 auto;
  background:#DF999B;
}
.content{
     
  width:900px;
  height:300px;
  margin:0 auto;
  background:#E42DE9;
}
.footer{
     
  width:900px;
  height:80px;
  margin:0 auto;
  background:#DF999B;
  }
.content-one{
     
  width:300px;
  height:300px;
  background-color:#5936EB;
  float:left;
}
.content-two{
     
  width:300px;
  height:300px;
  background-color:#0FE8E5;
  float:left;
}
.content-three{
     
  width:300px;
  height:300px;
  background-color:#15E720;
  float:left;
}

    示例3

  • html
    ```html
    <!doctype html>









- css
```css
@charset "utf-8";
/* CSS Document */
/*取消所有标签默认的内外边距*/
*{
    margin:0;
    padding:0;
}
a{
    text-decoration:none;
    color:#000;
    font-size:20px;
    display:block;
}
.nav{
    width:800px;
    height:40px;
    background:#eee ;
    margin:10px auto;
}
ul li{
    list-style:none;
    line-height:40px;
    float:left;
}
ul li a{
    padding:0 10px;
}
ul li:hover a{
    background:#900;
    color:#fff;
}

position定位（核心）

我们讲盒模型的时候，提到了3个属性可以用来控制页面排版。
三大属性：position属性，display属性，float属性。

  1. position 属性控制页面上元素间的位置关系。
  2. display 属性控制页面元素是否显示或者是堆叠还是并排显示。
  3. float 属性提供控制方法。
    • 通过float这种控制方法，可以实现多栏布局，导航菜单等等。

position属性是干嘛用的？怎么用？有哪些属性值？

  1. position属性控制页面上元素间的位置关系，也就是排版。
  2. 怎么用？要知道怎么用就要先了解position的属性值。
  3. 属性值：
    • static（默认状态）：页面元素默认的定位。
    • relative（相对定位）

      relative相对定位，相对于自己现在的位置（默认的位置）进行定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。（效果看案例）

    • absolute（绝对定位）

      absolute绝对定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。（效果看案例）。

    • fixed（固定定位）

      fixed固定定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。

想一想，我们的absolute绝对定位，它的定位点在哪里？
定位点：浏览器的左上角。能不能改变它的定位点？
答案是肯定的。

用relative和absolute配合使用就能改变我们的定位点。

示例1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>回到顶部</title>
<style>
a{
    
    background:url(image/top_bg.png);
    width:40px;
    height:80px;
    display:block;
    position:fixed;
    top:540px;
    left:1310px;
}
</style>
</head>

<body>
    <div class="one">
        <img src="image/天猫tmall.com.png"/>
    </div>
    <a href="#"></a>
</body>
</html>

示例2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>    position---fixed固定定位</title>
<style>
* {
    
    margin: 0px;
    padding: 0px;
}
div {
    
    width: 800px;
    height: 200px;
    margin: 10px auto;
}
#two{
    
    position:fixed;
    top:100px;
    left:30px;
}
</style>
</head>

<body>
    <div style="background:#900;">红色div</div>
    <div id="two" style="background:#F90;">橙色</div>
    <div style="background:#FF0;">黄色div</div>
    <div style="background:#0F0;">绿色div</div>
    <div style="background:#00C;">蓝色div</div>
    <div style="background:#90F;">紫色div</div>
</body>
</html>

示例3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position--absolute 绝对定位</title>
<style>
*{
    
    margin:0;
    padding:0;
}
.one{
    
    width:300px;
    height:300px;
    margin:100px;
    background:#900;
}
.two{
    
    width:200px;
    height:200px;
    background:#000;
    position: absolute;
    top: 0px;
    left: 100px;
    /*position:absolute;
    top:0px;
    left:0px;*/
}
/*.three{
    width:800px;
    height:300px;
    margin-left:200px;
    background:#E721D3;
    position:relative;
}
.four{
    width:200px;
    height:200px;
    background:#E9F42D;
    position:absolute;
    top:20px;
    left:20px;
}
.five{
    width:800px;
    height:300px;
    margin-left:200px;
    background: #17D763;
}*/
</style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
   <!-- <div class="three">
        <div class="four"></div>
    </div>
    <div class="five"></div>-->
</body>
</html>

示例4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position---relative相对定位</title>
<style type="text/css">
*{
    
    margin:0;
    padding:0;
}
.one{
    
    width:300px;
    height:300px;
    background:#900;
    position:relative;/*设置相对定位*/
    top:20px;/*向下偏移20px*/
    left:20px;/*向左偏移20px*/
}
</style>
</head>

<body>
    <div class="one"></div>
</body>
</html>

示例5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position 定位</title>
<style type="text/css">
*{
    
    margin:0;
    padding:0;
}
.one{
    
    width:300px;
    height:300px;
    background:#900;
    position:relative;
    top:20px;
    left:20px;
}
.two{
    
    width:400px;
    height:200px;
    background:#000;
    position:absolute;
    top:200px;
    left:100px;
}
</style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div></div>
</body>
</html>

#

清除浮动

clear清除浮动
float浮动这种控制方法，可以实现多栏布局，导航栏等功能。

但是float不是万能的，她也有她的副作用。
副作用是什么？被设置了float的元素后面的元素，会在空间允许的情况下，向上提升到浮动元素平起平坐的位置。

如果我并不想紧跟在我后面的元素浮动，也就是让它自己停留在原来的位置上，不跟着浮动，那么我们就对该元素设置clear（清除浮动）属性。

  • clear（清除浮动）的三个属性值：left（清除左侧浮动）,right,both。
    ```html
    <!doctype html>










```

🤩CSS教学往期回顾

  1. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
  2. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
  3. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
  4. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距

    💕👉博客专栏

文章标签：
前端开发
Java
容器
Docker
算法
凉凉心.
目录
相关文章
凉凉心.
|
23小时前
|
Java 索引 容器
（Java）Java里JFrame窗体的基本操作(组件篇-2)
回顾 这算是JFrame窗体基本操作的组件第二篇了，上一篇说过了单选框，复选框，按钮。 在这一篇中，我会说明下拉框和列表框 什么是组件？ 自行百度：java中JFrame窗体里的组件是什么？ 名字都给你想好了 ( :I ) JComBox下拉框 JComBox类，就是下拉框，实例化出来后，要填写泛型&lt;&gt;，添加是什么数据类型的内容，泛型中就写上该数据类型； JComboBox&lt;?&gt; combox = new JComboBox&lt;&gt;(); 以下实例化下拉框的时候我泛型写的全
凉凉心.
13 0
飞云觅宙
|
云栖大会 开发者
收到阿里云【乘风者计划】博主证书和奖励
收到阿里云【乘风者计划】博主证书和奖励 2023年2月对我来说是一个很好的开端，因为我在1号就收到了阿里云寄给我的【乘风者计划】博主证书和奖励。好兆头啊！ 我收到的是我获得的【技术博主】【星级博主】【专家博主】三个的奖品和证书，一快给我寄过来哒！
飞云觅宙
3040 2
收到阿里云【乘风者计划】博主证书和奖励
阿里云开发者
|
29天前
|
SQL 存储 分布式计算
【万字长文，建议收藏】《高性能ODPS SQL章法》——用古人智慧驾驭大数据战场
本文旨在帮助非专业数据研发但是有高频ODPS使用需求的同学们（如数分、算法、产品等）能够快速上手ODPS查询优化，实现高性能查数看数，避免日常工作中因SQL任务卡壳、失败等情况造成的工作产出delay甚至集群资源稳定性问题。
阿里云开发者
697 33
【万字长文，建议收藏】《高性能ODPS SQL章法》——用古人智慧驾驭大数据战场
蒋星熠Jaxonic
|
1天前
|
Java 项目管理 Maven
Maven项目管理与构建自动化完全指南
Maven彻底改变了Java项目管理方式，通过POM模型、依赖管理和标准化构建流程，大幅提升开发效率。本文深入解析其核心概念、多模块管理、私服搭建及与Spring Boot、Docker等现代技术栈的集成实践，助力开发者实现高效、规范的项目构建与团队协作。
蒋星熠Jaxonic
31 0
Maven项目管理与构建自动化完全指南
凉凉心.
|
23小时前
|
Java 数据安全/隐私保护 索引
（Java）Java里JFrame窗体的基本操作(组件篇-3)
回顾 说过了下拉框和下拉列表，本篇内容将了解滚动面板和各类输入框 什么是组件？ 如果不熟悉组件，可以将组件看作是某个Form表单中的表单元素，组件可以完善JFrame窗口的布局，以及一些功能； 本篇内容中所有的组件所用到的类全都来自于javax.swing这个包中，记得引入； 另：在使用组件前，请先将窗体中的内容类给实例化出来进行操作，代码如下： Container c = getContentPane(); JScollPane JScollPane类，说的就是滚动面板。它不同于其他组件，它是一个容器，
凉凉心.
13 0
凉凉心.
|
23小时前
|
存储 JavaScript Java
（Python基础）新时代语言！一起学习Python吧！（四）：dict字典和set类型；切片类型、列表生成式；map和reduce迭代器；filter过滤函数、sorted排序函数；lambda函数
dict字典 Python内置了字典：dict的支持，dict全称dictionary，在其他语言中也称为map，使用键-值（key-value）存储，具有极快的查找速度。 我们可以通过声明JS对象一样的方式声明dict
凉凉心.
19 0
凉凉心.
|
21小时前
|
JavaScript 前端开发 Java
【GoWails】Go做桌面应用开发？本篇文章带你上手Wails框架！一步步带你玩明白前后端双端的数据绑定！
wails是一个可以让你使用Go和Web技术编写桌面应用的项目 可以将它看作Go的快并且轻量级的Electron替代品。可以使用Go的功能，并结合现代化UI完成桌面应用程序的开发
凉凉心.
22 4
凉凉心.
|
23小时前
|
算法 Java Docker
（Python基础）新时代语言！一起学习Python吧！（三）：IF条件判断和match匹配；Python中的循环：for...in、while循环；循环操作关键字；Python函数使用方法
IF 条件判断 使用if语句，对条件进行判断 true则执行代码块缩进语句 false则不执行代码块缩进语句，如果有else 或 elif 则进入相应的规则中执行
凉凉心.
15 0
凉凉心.
|
21小时前
|
算法 Java Go
【GoGin】（1）上手Go Gin 基于Go语言开发的Web框架，本文介绍了各种路由的配置信息；包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器，适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用，特别适合需要高性能和简单路由的应用场景。
凉凉心.
33 4
凉凉心.
|
21小时前
|
存储 JavaScript Java
【Golang】（2）变量与常量？字面量与变量的较量！
本文带你了解Go语言中的变量与常量！ 并且在变量中如何进行强制转换类型！
凉凉心.
20 5

云原生

热门文章

最新文章

  • 1
    Docker CE 镜像源站
  • 2
    Minikube - Kubernetes本地实验环境
  • 3
    微服务架构的理论基础 - 康威定律
  • 4
    微服务（Microservice）那点事
  • 5
    Docker的Windows容器初体验
  • 6
    3分钟，了解阿里云热门开发者工具 Cloud Toolkit
  • 7
    Docker学习路线图 (持续更新中)
  • 8
    当 Kubernetes 遇到阿里云
  • 9
    容器镜像服务 Docker镜像的基本使用
  • 10
    使用阿里云容器服务Jenkins 2.0实现持续集成之Pipeline篇(updated on 2016.12.23)
  • 1
    内存溢出与内存泄漏：解析与解决方案
    11
  • 2
    零代码改造 + 全链路追踪！Spring AI 最新可观测性详细解读
    14
  • 3
    阿里云微服务引擎 MSE 及 API 网关 2025 年 9 月产品动态
    11
  • 4
    小白零代码模板建站：从选模板到上线的完整攻略
    26
  • 5
    图文解析带你精通时序PromQL语法
    72
  • 6
    【GoGin】（3）Gin的数据渲染和中间件的使用：数据渲染、返回JSON、浅.JSON()源码、中间件、Next()方法
    18
  • 7
    【SpringBoot（三）】从请求到响应再到视图解析与模板引擎，本文带你领悟SpringBoot请求接收全流程！
    21
  • 8
    【Docker】（2）还在浏览网页寻找Docker命令？本文全面列举与使用Docker里的各个命令！想要什么命令直接从本文拿！
    16
  • 9
    【Golang】（3）条件判断与循环？切片和数组的关系？映射表与Map？三组关系傻傻分不清？本文带你了解基本的复杂类型与执行判断语句
    17
  • 10
    【Docker】（3）学习Docker中 镜像与容器数据卷、映射关系！手把手带你安装 MySql主从同步 和 Redis三主三从集群！并且进行主从切换与扩容操作，还有分析 哈希分区 等知识点！
    28

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    深度 | 从0到3.0，揭秘阿里云洛神云网络的进化之路