CSS-布局的定位

最新推荐文章于 2024-05-15 13:58:29 发布
最新推荐文章于 2024-05-15 13:58:29 发布
阅读量280 收藏
点赞数
分类专栏： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tommy5553/article/details/80804194
版权
HTML 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
CSS
5 篇文章 0 订阅
订阅专栏

CSS布局定位

    position：

        属性：

            absolute：将对象从文档流中拖出，可以使用top，bottom等属性进行绝对的定位

            relative：不会将对象从文档流中托出去，也可以使用top，bottom属性进行定位。

position属性设置为absolute：
 

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <style type = "text/css">
  	div
	{
		width:200px;
		height:100px;
		border:2px solid blue;
	}
	#div51
	{
		background-color:red;
		position:absolute;
		top:50px;
		left:80px;
	}
	#div52
	{
		background-color:green;
		width:300px;
		height:100px;
	}
	#div53
	{
		background-color:orange;
	}
  </style>
 </head>
 <body>
	<div id = "div51">AAAAAAAAAAAA</div>
	<div id = "div52">BBBBBBBBBBBB</div>
	<div id = "div53">CCCCCCCCCCCC</div>
 </body>
</html>

position属性设置为relative：

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <style type = "text/css">
  	div
	{
		width:200px;
		height:100px;
		border:2px solid blue;
	}
	#div51
	{
		background-color:red;
		position:relative;
		top:80px;
		left:80px;
	}
	#div52
	{
		background-color:green;
	}
	#div53
	{
		background-color:orange;
	}
  </style>
 </head>
 <body>
	<div id = "div51">AAAAAAAAAAAA</div>
	<div id = "div52">BBBBBBBBBBBB</div>
	<div id = "div53">CCCCCCCCCCCC</div>
 </body>
</html>

 

 

Tommy5553
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV+CSS布局-定位布局
qq_45383769的博客
04-17 935
DIV+CSS布局-定位布局 定位布局有三种定位方式： 相对定位 relative，绝对定位 absolute，固定定位 fixed。这三种定位各种有共通之处，当然也各有不同点。 1.相对定位：position:relative 相对定位就是相对于原来的位置产生偏移，比如现在指定了top和left都为0的情况下，表面它原本就是在这里了。 2.绝对定位：position:absolute 绝对定位默认放东西的位置是按照排版来的，这个时候看起来还正常。 但是绝对定位实际上的位置是在页面最开头来定位的。比如我
CSS布局-定位以及层级关系
NewHouser的博客
10-19 2461
适用于在网页中需要特定排版位置的元素使用，一般出现于有嵌套关系的盒子模型中。定位分为静态定位、相对定位、绝对定位、固定定位。
CSS - 定位布局（position）
伏城之外的博客
07-20 2113
浮动布局的不足、定位模式和边偏移、静态定位、相对定位、z-index、层叠上下文、Stacking Context、包含块、Containing block、绝对定位、子绝父相、水平垂直居中、margin:auto、固定定位、版心右侧、视觉视口、布局视口、连续媒体、分页媒体、粘性定位、滚动机制............
css布局和定位
二师弟的博客
03-12 922
参考优秀的 CSS 布局和设计可以帮助我们学习和了解 CSS 的最佳实践，提高自己的 CSS 技能和设计水平
2024年最全css中的定位详解(1)，怒斩腾讯和阿里的Offer
2401_84975411的博客
05-15 636
定位模式是否脱标移动位置是否常用static 静态定位否不能使用边偏移很少relative 相对定位否（占有位置）相对于自身位置移动常用absolute 绝对定位是（不占有位置）带有定位的父级常用fixed 固定定位是（不占有位置）浏览器可视区常用sticky 粘性定位否（占有位置）浏览器可视区当前阶段少。
CSS - 网格布局（grid）
伏城之外的博客
07-20 6858
网格布局、grid、表格布局、二维布局、网格轨道、grid-template-rows、grid-template-columns、grid-template、fr单位、min-content、max-content、minmax、auto-fill、auto-fit、网格单元、网格项目、网格线、grid-row、grid-column、grid-area、网格区域、grid-template-area、网格间距、gap、显示网格、隐式网格、稀疏包装、密集包装、网格单元对齐、网格项目对齐、统一对齐、单独对齐
CSS - 浮动布局（float）
热门推荐
伏城之外的博客
07-20 1万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
CSS-Grid网格布局笔记
学习，思考，输出
07-11 2053
显示网格：是指item在定义单元格范围内，比如一行三列的布局，若item在这布局中就是显示单元格，不在则为隐式单元格。前提是容器的子元素超过了网络布局定义范围，比如一行三列的布局，正常是三个元素，但隐式单元格就是超过了三个元素。单元格列数跟随容器宽度自适应，宽度最小不会小于100px，行数是一个隐式单元格属性，会自动适应容器大小。上面没有给网格布局设置宽度与高度，以及网格的列数、行数，都是跟随元素和分辨率自动调节网格的列数、行数。默认子元素都是独占一个单元格的，如果要进行合并单元格，除了前面提到的用。
CSS 网页定位与布局
zhang_cherry的博客
02-19 2147
要想在网页上展示的内容合理、布局好看，那就少不了CSS定位与布局的应用。CSS网页定位分为三种：文档流定位、浮动定位和层定位，接下来分别讲一下这三种定位方式。 1 文档流定位 html中的元素按照是否独占一行可以分为：行内元素、块级元素和行内块元素。 行内元素：不能独占一行，使用width height属性无效。常见的行内元素有：span标签 a标签 块级元素：可以独占一行，通过width和height可以设置元素的宽、高。常见的块级元素：div table ul ol li p form h1 h2 …
CSS定位布局详解
大河之犬的博客
10-03 6921
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。
CSS-DIV页面布局
shao_xuan_的博客
10-12 3445
CSS-DIV页面布局DIV的概念CSS中的块元素和行内元素页面布局方法CSS的定位机制浮动属性常见的浮动布局清除浮动定位属性在页面布局中常用的CSS属性Div+CSS常见错误总结 DIV的概念 DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 是一样的。 DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码 注意：标签可以用来组合其它的HTML元素，但不
css-layout-and-positioning-css布局与定位
03-26
本教程将深入探讨CSS布局与定位的基础概念、重要属性以及各种布局模式。 首先，理解CSS盒模型是布局的基础。盒模型包括元素的内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。通过调整...
css-网格布局-详情
08-01
它解决了以往CSS布局方法（如表格、浮动、定位和内嵌块）中存在的问题，特别是垂直居中等复杂布局。Flex布局虽然改进了一维布局，但对二维布局的支持有限。Grid布局则专为解决布局问题而生，提供了一个完整、灵活的...
CSS-position(定位）
03-25
在网页设计中，CSS（层叠样式表）的position属性是至关重要的，它决定了元素在页面上的布局方式。本文将详细解析CSS-position的五个主要值：static、relative、fixed、absolute和sticky，以及它们在实际应用中的重叠...
css网站布局实录-2
12-15
4. **浮动与定位**：浮动（float）和定位（positioning）是CSS布局中的两个重要工具。浮动常用于创建多列布局，而定位则可以精确控制元素的位置，这两者结合使用能解决复杂的布局问题。 5. **圆角与阴影**：CSS3...
1.05 css定位布局
10-07
CSS 定位布局详解 在 CSS 中，定位（position）是指元素在网页中的位置和布局方式。CSS 提供了多种定位方式，包括 static、relative、absolute、fixed 等。不同的定位方式将元素在网页中的位置和布局方式进行调整。...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
CSS定位布局与装饰技巧详解
定位是CSS布局的关键组成部分，它允许设计师控制元素在页面上的位置，常用于解决盒子间层叠问题和创建特定布局效果。 定位的基本概念包括标准流，其中块级元素负责垂直布局，而行内元素则用于水平布局。浮动功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值