css中的定位---lesson12

最新推荐文章于 2024-09-17 23:49:30 发布
最新推荐文章于 2024-09-17 23:49:30 发布
阅读量360 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 我的Web前端之路
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/baidu_26994091/article/details/73478071
本文详细介绍了CSS中四种定位方式（relative、absolute、fixed、static）的特点与使用场景，并解析了display属性的不同值（none、inline、block、inline-block）对元素的影响。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

css中的定位涉及到的属性：

position

display

float

top、right、bottom、left

具体说明：

1、position：relative

相对布局：是相对于自己偏移前的元素进行的相对布局；使用top、left来设置偏移量；虽然偏移了，但是会保留自己未偏移时的空间，其他元素不能占用它。

图中可以看到“相对布局2”的位置偏移了，但是“相对布局3”的并没有紧紧贴着“相对布局1”之后进行放置；

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	border-width: 0px;
}

.area1{
	position: static;
	background-color: red;
}

.area2{
	position: relative;
	background-color: red;
	left: 20px;
	top: 60px;
}

</style>
</head>
<body>

<h4>position: relative;</h4>

<div>
	<p>相对布局1 </p>
	<p class="area2">相对布局2 </p>
	<p>相对布局3 </p>
</div>


</body>
</html>

2、position: absolute;

绝对布局：是基于设置了position为relative、absolute、fixed的父节点进行的绝对布局，使用top、left进行偏移；

偏移的元素不会保留未偏移时的空间大小，其他元素会占用该空间；

图中“绝对布局b”因为没有合乎规则的父节点，所以最终是以body为父节点来进行的绝对定位；

“绝对布局d”有合乎规则的父节点（设置了position: relative;），所以就以该父节点来进行绝对定位；


代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	border-width: 0px;
}

.area1{
	position: static;
	background-color: red;
}

.area2{
	position: relative;
	background-color: red;
	left: 20px;
	top: 60px;
}

.area3{
	position: absolute;
	background-color: red;
	left: 20px;
	top: 60px;
}

</style>
</head>
<body>

<div>
	<p>相对布局1 </p>
	<p class="area2">相对布局2 </p>
	<p>相对布局3 </p>
</div>

<div>--------------------------------------------------------------</div>

<div>
	<p>绝对布局a </p>
	<p class="area3">绝对布局b </p>
	<p>绝对布局c </p>
	<div style="position: relative;background-color: yellow;">
		ddddddd
		<p class="area3">绝对布局d</p>
	</div>
</div>


</body>
</html>

3、position: fixed;

固定布局：元素是相对于浏览器窗口进行的固定布局，设置了偏移量top、left之后，元素的位置不会随着滚动条的滚动而移动；而且元素不会保留未偏移时的空间大小，其他元素可以占用该空间；

图中可以看到“固定布局II”,是直接基于浏览器的窗口进行的固定布局，而且“固定布局III”占用了“固定布局II”未偏移时的空间；


代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	border-width: 0px;
}

.area1{
	position: static;
	background-color: red;
}

.area2{
	position: relative;
	background-color: red;
	left: 20px;
	top: 60px;
}

.area3{
	position: absolute;
	background-color: red;
	left: 20px;
	top: 60px;
}

.area4{
	position: fixed;
	background-color: red;
	left: 50%;
	top: 10px;
}

</style>
</head>
<body>

<div>
	<p>相对布局1 </p>
	<p class="area2">相对布局2 </p>
	<p>相对布局3 </p>
</div>

<div>--------------------------------------------------------------</div>

<div>
	<p>绝对布局a </p>
	<p class="area3">绝对布局b </p>
	<p>绝对布局c </p>
	<div style="position: relative;background-color: yellow;">
		ddddddd
		<p class="area3">绝对布局d</p>
	</div>
</div>

<div>--------------------------------------------------------------</div>

<div style="margin-top: 80px;">
	<p>固定布局I </p>
	<p class="area4">固定布局II </p>
	<p>固定布局III</p>
	<div style="position: relative;background-color: yellow;">
		IVIVIVIVIVIV
	</div>
</div>

</body>
</html>

4、display可取值：

display: none;设置元素不可见，不占用空间位置；

display: inline;将一个元素设置为行内元素，行内元素设置width和height是无效的；大小是包裹内容

display: block;将一个元素设置为块级元素，块级元素可以设置width和height；如果不设置宽，默认是与父元素宽度一样，如果不设置高度，默认是包裹高度；

display:inline-block;将一个元素设置为行块元素，具有行内元素的特性，同时可以设置宽高；


代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	border-width: 0px;
}

.area1 {
	position: static;
	background-color: red;
}

.area2 {
	position: relative;
	background-color: red;
	left: 20px;
	top: 60px;
}

.area3 {
	position: absolute;
	background-color: red;
	left: 20px;
	top: 60px;
}

.area4 {
	position: fixed;
	background-color: red;
	left: 50%;
	top: 10px;
}
</style>
</head>
<body>

	<div>-------------------------相对布局-------------------------------------</div>

	<div>
		<p>相对布局1</p>
		<p class="area2">相对布局2</p>
		<p>相对布局3</p>
	</div>

	<div>-------------------------绝对布局-------------------------------------</div>

	<div>
		<p>绝对布局a</p>
		<p class="area3">绝对布局b</p>
		<p>绝对布局c</p>
		<div style="position: relative; background-color: yellow;">
			ddddddd
			<p class="area3">绝对布局d</p>
		</div>
	</div>

	<div>--------------------固定布局------------------------------------------</div>

	<div style="margin-top: 80px;">
		<p>固定布局I</p>
		<p class="area4">固定布局II</p>
		<p>固定布局III</p>
		<div style="position: relative; background-color: yellow;">
			IVIVIVIVIVIV</div>
	</div>

	<div>---------------------display-----------------------------------------</div>

	<div style="margin-top: 10px;">
		<p style="display: inline; height: 60px; background-color: red">pA</p>
		<p style="display: inline; height: 60px; background-color: red">pB</p>
		<p style="display: none; height: 60px; background-color: red">pC</p>
		<div style="width: 80px;height: 80px;background-color: yellow;">
			<p style="background-color: red">pD</p>
			<p style="background-color: red;width: 40px;">pD2</p>
		</div>
		<a style="display: block; height: 60px; width: 60px; background-color: red">aE</a>
		<a style="display: inline-block; height: 60px;width:80px;background-color: red">aF</a>
	</div>

</body>
</html>

5、float可取值left,right

一般用于水平菜单

htm-css-lesson
03-21
【文件名称列表】：尽管没有具体的文件名提供，我们可以推测“htm-css-lesson-master”可能是一个主目录或源代码库，可能包含多个子文件夹和文件，如HTML模板、CSS样式单、JavaScript脚本、示例项目、课件或者练习。...
CSS-Lesson:初级CSS代码
05-03
**CSS（层叠样式表）**是网页设计中不可或缺的一部分，它用于定义页面的布局、颜色、字体等视觉样式。...在`CSS-Lesson-main`这个文件中，可能包含了这些概念的实例和练习，建议你打开文件进行深入学习和操作。
【CSS】Css设置position:absolute div标签不随页面滚动而滚动
热门推荐
dkz97的博客
06-30 2万+
问题原因   最近实习在修bug的时候，遇到一个问题。简单来说html的结构就和下面差不多 <body> <!-- 省略多个外部结构 有overflow:auto--> <div id="下拉框点击按钮"> <div id="下拉框窗口" style="position:absolute; left=xxx; top=xxx"> 当然这只是简单的结构 </div> </div> </bo
外层元素overflow:auto/scroll导致absolute定位的子元素溢出部分被隐藏
Wind_waving的博客
03-14 1万+
1. 问题重现： 简易版复现这个问题的代码如下： <div id='wrapper' style="height: 80px;background-color: bisque;width: 400px;overflow-x: auto;display: flex;flex-wrap: nowrap;"> <div class="menu">111 <div style="width: 100%;position: absolute;bot
lesson4--html-css基础主要知识点
wywywy_的博客
05-18 188
一、文字溢出处理 1.单行文本溢出处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单行文本溢出处理方法</title> <style> *{ margin:0; padding:0; } .text...
lesson2--html-css基础主要知识点
wywywy_的博客
05-15 260
1.浏览器的主要内核（有独立研发的内核）                              &nbsp...
lesson3--html-css基础主要知识点
wywywy_的博客
05-17 242
1.用定位实现两栏布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两栏布局</title> <style> *{ margin:0; padding:0; } .right{ position...
Web学习笔记-CSS
一只快乐的小蒟蒻~
11-09 536
Web前端学习笔记-CSS
Pre-Lesson 8
最新发布
2401_87121330的博客
09-17 935
CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS），简单的说，它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。所谓层叠 : 是指样式表允许以多种方式规定样式信息。可以规定在单个元素中，可以在页面头元素中，也可以在另一个CSS文件中，规定的方式会有次序的差别（讲解引入时说明）。所谓样式：是指丰富的样式外观。
CSS入门指南-3：定位元素
goodspeeed的专栏
07-26 102
这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。定位（p...
selenium学习--lesson1
xd060606的博客
01-18 183
 hello！最近饲养员在学习web自动化，主要是通过python+selenium进行代码的编写。  首先为大家介绍定位元素的几种方法： driver.find_element_by_id# 根据id定位 driver.find_element_by_class_name#根据class_name 只可以传一个值 driver.find_element_by_name#根据name进行定位...
lesson-w02d01-css-position
04-06
本教程将深入探讨CSS定位的概念、属性及其在页面布局中的应用。 首先，我们需要了解四种主要的定位模式：静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。 1. **静态定位...
neogcamp-lesson-3-live:对简单的Web html和CSS进行实时编码
03-29
在本课程"neogcamp-lesson-3-live:对简单的Web html和CSS进行实时编码"中，我们将深入探讨构建Web页面的基本技术，包括HTML（超文本标记语言）和CSS（层叠样式表）。这两个核心元素是任何网页设计的基础，无论你是...
css样式的继承和覆盖---lesson3
ThinkDo的博客
06-09 901
样式决定因素： 决定一个元素的样式：除了自己本身设置的样式：如style、class、id、复合内容css选择器外，还需要考虑从父元素中获取的样式，如果自己的样式没有就从所有父元素中获取，如果多个父元素有相同的样式属性，那么会以最近的父元素的样式属性为准； 调试方式： 使用火狐浏览器可以很方便的在线查看和调试样式，下面来看看； 效果图： 分析 通过点击firebug上查
css样式选择器的类型---lesson2
ThinkDo的博客
06-07 704
css样式选择器有4类： 1、类选择器，可以作用任何html元素 2、id选择器，仅用于一个html元素 3、标签选择器，用于相同的html标签元素 4、复合内容选择器，基于选择的内容 基本使用范例： 截图： 代码： Insert title here .zs-item { font-size: 18px; color: #F60; } #zs-first {
css的引入规则---lesson1
ThinkDo的博客
06-07 412
引入规则有3种方法： 1、外部样式表：通过引入外部的一个css文件来作用要修饰的元素；该样式可以被其他页面文件引入使用； 2、嵌入式样式表：通过在当前页面的head部定义样式；样式只在页面内有效； 3、内联式样式表：通过在某一个元素上定义style属性来表示；样式只对该元素有效； 基本使用范例： 截图： 代码： a.html Insert title here
css中的表格---lesson9
ThinkDo的博客
06-16 357
css中的表格table涉及到的属性控制： border-collapse caption-side empty-cells border-spacing table-layout border 截图： 代码： Insert title here #customers { font-family: "Trebuchet MS", Arial, Helvetica,
css中的列表---lesson8
ThinkDo的博客
06-15 334
css中的列表分为无序ul和有序ol，它们的相关属性控制有： list-style-type list-style-image list-style-position 截图： 代码： Insert title here ul.list_style_type { list-style-type: disc; /*定义无序列表ul的样式： disc实心圆
深入理解CSS Lesson-15主要概念
在这份资源中，我们聚焦于Lesson-15，它针对的是CSS相关知识的学习。CSS是一种用来表现HTML或XML文档的样式的计算机语言。它不仅能够设置文本的样式，比如字体大小、颜色、间距等，还能设置页面布局，包括元素的位置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值