Html文档流position

最新推荐文章于 2022-06-08 19:13:05 发布
最新推荐文章于 2022-06-08 19:13:05 发布
阅读量163 收藏
点赞数
分类专栏： Html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24432127/article/details/88984199
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			#div1 {
				border: 1px solid red;
				width: 100px;
				height: 100px;
				position: static; /* 默认文档流是static设置 */
			}

			#div2 {
				border: 1px solid blue;
				width: 100px;
				height: 100px;

				position: absolute; /* 脱离html文档流使其自己设置定位 是相对整个页面的定位 */
				/* left:300px;
				top: 250px; */
				/* right: 0px;
				bottom: 0px; */
				right: 100px;
				bottom: 300px;
			}

			#div3 {
				border: 1px solid lime;
				width: 100px;
				height: 100px;
				position:fixed; /* 脱离html文档流使其自己设置定位 是相对整个电脑屏幕进行定位 */
				right: 300px;
				bottom: 300px;
			}
			#div4
			{
				border: 1px solid yellow;
				width: 100px;
				height: 100px;
				position: relative; /* 脱离html文档流使其自己设置定位 是相对原来文档流中的位置进行定位 */
				left: 50px;
				top: 50px;
			}
			
			/* position:inherit 指该元素继承于父元素 */
			
			/* ----------------------------------------------------------------- */
			
			
			#div5
			{
				background-color:blue;
				width: 100px;
				height: 100px;
				position:absolute; 
				left: 100px;
				top: 500px;
				z-index: 100; /* 设置元素的层级 谁在谁在的上面 */
			}
			
			#div6
			{
				background-color: red;
				width: 100px;
				height: 100px;
				position: absolute; 
				left: 120px;
				top: 520px;
				z-index: 99;
			}
			
			#div7
			{
				background-color: yellow;
				width: 100px;
				height: 100px;
				position: absolute; 
				left: 140px;
				top: 540px;
				z-index: 98;
			}
			
			
			
		</style>

	</head>
	<body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<div id="div3">div3</div>
		<div id="div4">div4</div>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		<div id="div5"></div>
		<div id="div6"></div>
		<div id="div7"></div>
	</body>
</html>

 

丷寒枫丷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于文档流解读html元素的(css)定位形式
01-29
基于文档流解读html元素的(css)定位形式 每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。 　　内联元素也不会独有一行. 简直一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。 　　有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位. 然则在IE中浮动元素也存在于文档流中
html3-position
02-14
在`html3-position.html`文件中，可能包含了上述概念的示例代码，而`font`和`img`可能是用于演示如何定位字体和图像元素的资源文件。学习这些定位技术对于创建交互性强、布局灵活的网页至关重要。熟练掌握这些技巧，...
Html文档流
kmguo的专栏
03-04 1266
写html，css的同学应该需要清楚什么是文档流。文档流：将窗体自上而下分成一行一行, 并在每行中按从左至右的挨次排放元素,即为文档流。     每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。内联元素也不会独有一行. 一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定
文档流
weixin_30852419的博客
04-24 112
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 文档流 文档流处在网页的最底层，它表示的是一个页面中的位置，...
HTML文档流
qq_44848423的博客
01-08 154
概念     我们编写的html文档是显示在浏览器上面的，我们可以将浏览器的屏幕比作河流的两岸，那么它里面显示的内容就是文档流。     文档流的组成单位就是html元素。大致可以分为两类: 元素类型 特点 举例 块级元素（block） 在文档流中独占一行，元素前后都有换行符 div、p 内联元素（inline） 多个内联元素在文档流中可以并排显示 span、img 块级元素和内联元素  &nb
html中的文档流
weixin_43312083的博客
04-16 1399
一、什么是文档流？ 那么所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。 当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行内元素。 二...
html中position的一个小用法使用介绍
09-28
`#num`元素的`position`被设置为`absolute`，使得它脱离了正常文档流，并且相对于最近的定位父元素（这里是`#car`）进行定位。通过设置`top`和`left`属性，我们可以精确地控制`#num`在`#car`内部的相对位置。这样，...
前端基础——文档流与BFC
09-26
在前端开发中，理解和掌握文档流（Document Flow）与块级格式化上下文（Block Formatting Context，简称BFC）是构建网页布局的基础。这两个概念对于布局的控制、元素的定位以及盒模型的理解至关重要。 首先，我们来...
html之CSS设计（float定位和position定位详细分析）
01-20
通过使用`float`属性和`position`中的`absolute`，元素可以实现脱离文档流。 2. **块级元素与内联元素**：块级元素如`div`、`form`、`table`等，它们通常占据整行并可设置`width`和`height`属性。内联元素如`span`...
HTML中的文档流
枫叶在飘呀的博客
07-17 1377
文档流 什么是文档流？ 文档流：页面从上往下一行一行，其中每行从左至右的顺序，这种排列方式成为文档流。 什么是脱离了文档流？ 脱离文档流意味着 它的排列顺序不遵循正常情况下文档的排列顺序，已经脱离了文档流，它不占用空间，处于浮动状态，脱离了文档流的元素的定位相对于其正常情况下的文档流，所以处于正常文档流的元素会占用原先的空间。 脱离文档流的几种情况？ 首先是float 1.先说一下，float使得元素脱离文档流，该元素也可以理解为不占用空间了，那么处于正常情况下的元素就占用了它的空间，所以通过下面的例子演
HTML文档流和文本流
shkstart的博客
06-30 536
HTML中的文档流和文本流 概述 在我们日常的书写代码中,经常使用到float:left/right和position:absoulte/fixed,我们都知道这几个CSS样式都能使HTML中的元素脱离文档流(normal-flow),但是他们脱离文档流之后的效果是否相同呢? 文档流与文本流 文本流 文本流,简单来说就是元素内部的一系列的字符的排列规则。 文档流 文档流,英文是normal flow,又翻译为常规流,标准流,正常流,普通流等。 文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流
position、float与文档流
GuoZebin的博客
11-24 463
1.什么是文档流？ 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序) 2.position 概述： position定位，它的作用就是把元素放到你想放的位置上。在css中牵扯到位置定位的一般就会有一个参照，position也不例外，它的取值有三个：...
html中普通文档流,HTML中的文档流和文本流
weixin_42412324的博客
06-03 274
概述在我们日常的书写代码中,经常使用到float:left/right和position:absoulte/fixed,我们都知道这几个CSS样式都能使HTML中的元素脱离文档流(normal-flow),但是他们脱离文档流之后的效果是否相同呢?文档流与文本流文本流文本流,简单来说就是元素内部的一系列的字符的排列规则。文档流文档流,英文是normal flow,又翻译为常规流,标准流,正常流,普通...
（17）HTML标准文档流
Java田根旺
11-29 1736
在我们遇到的 HTML 元素中，有的标签元素如 <div>、<p> 等在浏览器中加载时必须独自占满一行，有的标签元素如 <a> 、<span>等则不会独占一行，原因是什么？ 一、什么是标准文档流？ 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。HTML就是一种标准文档流文件。HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。 1.1微观现象： ①.
HTML文档流与元素类型基本介绍
qq_43293207的博客
12-02 711
基本介绍 行元素 常见默认行元素类型的标签主要有span ，strong，em等。其主要特点如下： 不可设置元素宽，高相关属性。默认宽高为内容宽高度。 margin外边距只对左，右，下方向生效。 padding内边距只对左，右方向生效。 与其他行元素（包括行内块元素）在同一行。 可通过设置css属性display:inline将其他类型元素转为行元素。 块元素 常见默认块元素类型的标签主要有div，p，h1~h6，table，form
css —— 文档流，position详解
huzhenv5的博客
03-21 1117
文章目录一些基本概念文档流position简介 一些基本概念 在讲position属性之前，我们先要了解一些基本概念，有助于我们深入理解position的每个值的特点 文档流 我们来看看什么是文档流(normal flow)，下面是 www.w3.org 的描述： Normal flow Boxes in the normal flow belong to a formatting contex...
CSS文档流——position，float属性详解
m0_67623521的博客
06-08 816
​ 文档流的一般情况可能不满足我们的设计需求，可以使用不同的布局方式来改变顺序，当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等来改变正常的文档流。......
CSS之float,文档流,position详解
上善若泪
03-14 455
文章目录1 CSS浮动1.1 浮动定义1.2 Float造成的影响1.2.1 对其父元素的影响1.2.3 对其兄弟元素（非浮动）的影响1.2.4 对其兄弟元素（浮动）的影响1.2.5 float对自身元素的影响1.2.6 float对子元素的影响1.2.7 float对父元素之外的元素的影响1.2.8 浮动让margin-top属性失效1.2.8.1 margin-top失效1.2.8.2 子元素设置margin-top作用于父容器1.3 包含浮动1.3.1 清除浮动1.3.1.1 Overflow技巧1
HTML position
最新发布
05-25
HTML position 属性用于指定 HTML 元素的定位方式。常用的定位方式有以下几种： 1. static（默认值）：元素按照文档流进行排列，不受 top、bottom、left、right 属性的影响。 2. relative：元素相对于自身的初始位置进行定位，可以通过 top、bottom、left、right 属性调整位置。 3. absolute：元素相对于最近的已定位祖先元素（如果没有已定位的祖先元素，则相对于文档的 body 元素）进行定位，可以通过 top、bottom、left、right 属性调整位置。 4. fixed：元素相对于浏览器窗口进行定位，可以通过 top、bottom、left、right 属性调整位置。 5. sticky：元素在跨越特定阈值前为相对定位，之后为固定定位。可以通过 top、bottom、left、right 属性调整位置。 这些属性可以通过 CSS 的 position 属性来控制元素的定位方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值