Position定位

最新推荐文章于 2021-06-26 15:34:43 发布
最新推荐文章于 2021-06-26 15:34:43 发布
阅读量395 收藏
点赞数
分类专栏： 学习笔记 文章标签： css position
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/where_slr/article/details/72488950
版权

Position定位

static、fixed、relative、absolute、sticky(粘性定位！！！)、inherit（继承）、initial(初始化)

特性：
1.定位的元素，块级元素仍然是块级，行内还是行内元素，不会改变其属性；
2.Z-index 层叠概念；

  • static（静态定位）它是position 的默认值，任意的position:static的元素是不会被特殊定位的。它表示的是出现的正常的流中（忽略了top,left,right,bottom或者是z-index的声明，如果使用了position:static的话，以上说的属性就是不会起作用的。）

  • relative（相对定位）：relative表现是和static是一样的，除非我们自己添加一些额外的属性。它是生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身的）位置进行定位的。就是总的来说是根据自己本身的定位相对移动的。并且是可以通过z-index来进行层次的分级。虽然定位为relative的元素是会偏离正常的文本流当中，但是其在文本流位置是依然存在的。其他的元素是不会受该元素的影响的，浏览器中还是会给这个偏离正常流元素一个位置。

<style>
.relative1 {
	position: relative;
	border:1px black solid;
}
.relative2 {
	position: relative;
	top: 20px;
	left: 20px;
	background-color: white;
	width:100px;
	height:100px;
	border:1px red solid;
}
.relative3{
	width:200px;
	height:100px;
	border:1px blue solid;
	position:relative;
}
</style>
</head>
<body>
	<div class="relative1">
		relative1
		<div class="relative2">
			relative2
		</div>
		<div class="relative3">
			relative3
		</div>
	</div>
</body>
</html>

我这里设置了relativel是父元素，其他是子元素。我将父元素设置为position:relative，如果我们没有给他添加额外的属性的话，那么父元素的宽度就是撑满整个浏览器的窗口了，但是如果给父元素设置宽度的大小的话，那么宽度就不是撑满整个浏览器的窗口，所以说它跟static的表现是一样的。

但是如果父元素设置为position:absolute的话，即使没有给他设定宽度，它的宽度也不会是撑满整个浏览器窗口的。

并且当relative1是relative2的父元素，但是不是relative3的父元素的时候，就会产生这样的效果的
这里写图片描述
relative2像在漂浮在上层一样 ，所以我们是可以使用z_index来设置分层的。

  • absolute （绝对定位）是脱离正常的文本流，与relative的区别是其在正常流中的位置是不再存在的。例如我们relativel设置为relative，relative2设置为absolute，relative3也设置为absolute，然后就会出现这个效果的。relative2与relative3都相叠在一起，因为他们都设为position：absolute。所以他们在正常流中的位置是不再促在的，只能被其他元素占用的。
    -生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

这里写图片描述

  • fixed 一个固定定位元素会相对于浏览器来定位的，这意味着如果页面滚动的话，它还是会停留在相同的位置上的，而且top,right,botton和left属性都是可以使用的。一个固定的元素是不会保留它原有的位置的，这也是脱离文本流的。

需要注意的是，父子关系是无法用z-index来设定上下关系 的，一定是子级在上父级在下

-sticky(粘性定位！！！)

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。

    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;

滚动前：
这里写图片描述
滚动后：

这里写图片描述

where_slr
关注
专栏目录
MySQL的一些函数
qq_32451661的博客
09-02 231
MySql的几个函 ----------------------简单记录几个函数-------------------------- 第一个：position（substr in str） 意义：子字符串b在字符串a中出现的位置 例子： -- 查询表中`item_name`字段中的值包含'北京'的数据行 SELECT * FROM `op_item` AS it WHERE POSITIO...
CSS中的position
whereismatrix的专栏
03-23 712
position 为了制作更多复杂的布局，我们需要讨论下 position 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，不过你最好还是把这页放到书签里。 static .static { position: static; } static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 st
position定位详解
Medlen
01-23 961
position定位详解 1、position的属性值： static fixed relative absolute 2、属性值详解 （1）static   默认值 （2）fixed    固定定位 相对于浏览器窗口是固定位置，无论滚动条如何滚动，其位置不会改变。（大多数广告是这样做的）。 定义position为fixed后，可通过top、left、bottom、
position定位的使用
qq_39571602的博客
09-23 205
  深入理解css中position属性及z-index属性 　　在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 　　position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。   第一...
redis几种数据格式存取方式
cuixuefeng1112的专栏
06-12 5365
import java.util.List; import java.util.Map; import java.util.ResourceBundle; import java.util.Set; import java.util.logging.Logger; import redis.clients.jedis.BinaryClient.LIST_POSITION; im
总结CSS的position定位属性在使用的一些重点
12-13
关于CSS定位，有人很多时候都是随便用用，符合自己的要求就行。但是CSS中的position等属性确实有很多需要认真考究的地方。 1.position:staticstatic属性是position的默认值，也就是说，当一个元素没有为其设定...
html之CSS设计（float定位和position定位详细分析）
01-20
本文将深入探讨两种主要的定位方式：float浮动和position定位。 一、float浮动 1. **文档流**：在HTML中，元素默认按照文档流进行排列，即从左至右，从上至下。**脱离文档流**意味着元素不再遵循常规布局，而是...
css position 定位
01-19
如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的...
全面剖析CSS Position定位
09-24
CSS Position定位是CSS布局中的重要概念，它决定了元素在页面中的具体位置。定位方式有多种，包括静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)以及继承定位(inherit)。每种定位方式...
mysql包好某个字段_Mysql查询某个字段中是否包某个字符串的几种方法
weixin_42572602的博客
02-06 283
Mysql查询某个字段中是否包某个字符串的几种方法在工作中，有时候，我们会遇到这种需求，比如 ，批量修改某个字段的数据值，这个字段又是字符串且这些字符串都包含指定特殊的字符串，这个时候怎么办呢？如下：我们需要，在sys_pid字段，批量添加mm_xxx_这个值，而且sys_pid字段有个特点，就是：都包含了359950439_值。分析：一：查询a表中，sys_pid字段包含359950439_的所...
mssql 将查询结果作为表名参数_原创亲测：mysql包含查询的四种解决方案-示例详解...
weixin_39614322的博客
11-24 540
测试表和测试数据方法1:使用likeLIKE通常与通配符%一起使用，%表示通配pattern中出现的内容，而不加通配符%的LIKE语法，表示精确匹配，其实际效果等同于 = 等于运算符SELECT * FROM 表名 WHERE 字段名 like "%字符%";示例：SELECT * FROM ys_dongtai t WHERE t.content LIKE '%#%';方法2，使用LOCATE(...
Redis学习 工具类(四)
日薪灬越亿的博客
11-24 231
import java.util.List; import java.util.Map; import java.util.Set; import org.springframework.stereotype.Component; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import r...
Mybatis：in在where查询条件中的写法(mysql和pgsql)
奋斗鱼
01-27 5479
在mybatis使用过程中，有时需要传递一个包含多个值的参数，用in来查询这些值范围内的数据，如fid是一个Int类型字段，现在需要查询1,2,3这三个fid的记录， 直接将 1,2,3作为一个入参传递进来时，需要做些修改才能正确实现In的条件查询。 1.Mysql中的写法 in在where查询条件中可以使用locate函数进行查找，locate(查找字符串,源字符串) 返回值为true或false。 select fid,fname from tb_demo WHERE LOCATE(CO...
定位position详解(一)
jlin991的博客
01-20 3769
0.简介首先记得p h1 div 等是称为块级元素，它们会生成”块框”。 而strong em span等是行内元素，它们生成“行内框”CSS 有3种基本的定位机制：浮动 绝对定位 普通文档流。 除非指定，否则所有框都在普通流中定位！普通流：块级框一个一个垂直排列，由元素在HTML中的位置决定。对于行内框： 水平padding 内边距，margin外边距，border可以调整他们的水平间距
Redis操作List工具类封装，Java Redis List命令封装
yijidl9147的博客
09-27 9841
Redis列表是简单的字符串列表，按照插入顺序排序。你可以添加一个元素导列表的头部（左边）或者尾部（右边） 一个列表最多可以包含 232 - 1 个元素 (4294967295, 每个列表超过40亿个元素)。   下载 Java代码   /**************************** redis 列表List start**
MySQL字符串函数之position/locate/instr
liuchun2018的博客
12-21 426
1.POSITION(substr IN str)/LOCATE(substr,str) 返回字符串str中第一次出现子字符串substr的位置，从1开始 SELECT POSITION('s' IN 'wsws') ===&amp;gt;&amp;gt;2 SELECT *FROM rc_bank_label WHERE id in (1,2); //选择 SELECT *FROM rc_bank_labe...
在html中 position默认值,CSS 中 Position 定位详解
weixin_39761558的博客
06-26 2098
Position 属性用来指定一个元素在网页上的位置，常用的有5中定位方式。一、static 默认值static是 Position属性的默认值。浏览器会按照源码的顺序，决定每个元素的位置，这称为”正常的页面流”(normal flow)。每个块级元素占据自己的区块(block)，元素与元素之间不产生重叠，这个位置就是元素的默认位置。注意，static定位所导致的元素位置，是浏览器自主决定的，所以...
关于C#中关于List.where中过滤条件的使用注意事项
热门推荐
u013293782的专栏
09-28 2万+
个人开发过程中遇到类似问题， 例如当通过list,where(p=>p.ID!=“1”||p.name!="张三").toList() where中的过滤条件当用“或”时是没有任何作用的。 类似oracle中SQL中的where条件 正确的过滤方式应为list,where(p=>p.ID!=“1”&&p.name!="张三").toList() 这样才能过滤出想要的list。 
position定位偏移
最新发布
05-27
position定位偏移是指在CSS中使用position属性时，元素相对于其父元素或文档流中其他元素的位置偏移量。使用position属性可以将元素从文档流中脱离出来，并且可以通过设置top、right、bottom、left属性来实现元素的定位偏移。其中，top、right、bottom、left属性控制元素的上、右、下、左方向的偏移量，可以使用百分比或像素值进行设置。值得注意的是，当使用position属性时，元素会脱离文档流并且不再占用原本应该占用的空间，因此可能会导致其他元素的位置发生变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值