Position

Position
千次阅读

2022-02-10 15:35:24

因为工作内容的变动，好长时间没有做unity的项目了，很多基础都忘记了，趁现在学习清楚了，记录一下

position：是物体在场景的具体位置信息。

localPosition：是本物体相对于父物体位置的偏移信息，localPosition为自身矩形中心点(Pivot)与其父节点矩形中心点(Pivot)的相对位置坐标，与自身锚点(Anchors)无关。

anchoredPosition：此值与本物体的矩形中心(Pivot)的和本物体的锚点中心点(Anchors)有关，anchoredPosition为矩形中心点与与锚点中心点之间的相对坐标

参考：RectTransform的localPosition与anchoredPosition(3D)的区别 - lxnow - 博客园

侵权则删除

unity 游戏引擎

更多相关内容

CSS中position详解

千次阅读 多人点赞 2019-06-26 15:35:09

一、position属性 position有5个值，分别为static，relative，absolute，fixed，sticky。 1.1 static static是position的默认属性，元素会按正常的文档流进行排序，不会受到top，bottom，left，right的影响。 ...

一些关于定位和叠加的理解

一、position属性

position有5个值，分别为static，relative，absolute，fixed，sticky。

1.1 static

static是position的默认属性，元素会按正常的文档流进行排序，不会受到top，bottom，left，right的影响。

1.2 relative

relative相对定位的元素会较正常文档流中的位置进行偏移，受top，bottom，left，right的影响。就是元素还在文档流中像static一样占着位置，但视觉上会有偏移，多用于absolute绝对定位的父元素。

1.3 absolute

absolute绝对定位会脱离正常的文档流，相对于最近的进行过定位的（非static）父级元素定位，若没有父级元素进行过定位，则相对于即浏览器窗口定位。

1.4 fixed

fixed固定定位同样是脱离正常的文档流，一直相对于浏览器窗口定位，无论页面如何滚动，此元素总在屏幕的同一个位置。
注：当fixed定位的父元素使用了transform的样式时，fixed定位会失效，变成和absolute一样的效果。

1.5 sticky

sticky粘性定位需要指定 top，right，bottom，left 四个阈值其中之一才会生效。
阈值为此元素在可视区域中与边界的距离，跨越特定阈值前为相对定位（relative），当页面滚动导致此元素跨越阈值则变为固定定位（absolute）。
注：此属性兼容性不是特别好，请根据业务场景进行选择。
附兼容性传送门：https://caniuse.com/#search=sticky

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div class="box">
       <div>title</div>
       <div class="stickyBar">stickyBar</div>
       <p>this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!</p>
   </div>
</body>
</html>
<style>
    div.box{
        height: 2000px;
    }
    div.stickyBar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding: 5px;
        background-color: #cae8ca;
        border: 2px solid #4CAF50;
        width: 200px;
    }
    div p {
        width: 200px;
    }
</style>

效果：
在这里插入图片描述

二、元素叠加时的几种状态

实际开发过程中免不了遇到元素的叠加问题，大都可以使用除static以外的定位方式（relative，absolute，fixed，sticky），配合z-index来控制叠加的展示方式（z-index只在position不为static时才生效）。
注：父级加transform、opacity会使子元素的z-index失效，因为它们会创建新的stacking context，然后子元素原来设置的z-index会作用到这个新的stacking context上。
以下是可能的几种情况：

2.1

同一级别的元素，定位方式相同且没有设置z-index，在html结构中靠后的元素在上面。
注：同级别的static元素也可以叠加。常见的方法有把margin设为负数或使用transform。用transform的话，需要把两个元素都加上transform，这样在html结构中靠后的元素会在上面，否则加了transform的会展示在没加transform的元素上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <p>divOne</p>
        <p>position: absolute;</p>
    </div>
    <div class="two">
        <p>divTwo</p>
        <p>position: absolute;</p>
    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
    .one {
        position: absolute;
        background-color: red;
        top: 10px;
        left: 10px;
    }
    .two {
        position: absolute;
        background-color: blue;
        top: 100px;
        left: 100px;
    }
</style>

在这里插入图片描述

2.2

同一级别的元素使用了relative，absolute，fixed，sticky，那么z-index值大的元素在上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <p>divOne</p>
        <p>position: relative;</p>
    </div>
    <div class="two">
        <p>divTwo</p>
        <p>position: absolute;</p>
    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
    .one {
        position: relative;
        background-color: red;
        top: 10px;
        left: 10px;
        z-index: 99;
    }
    .two {
        position: absolute;
        background-color: blue;
        top: 50px;
        left: 100px;
        z-index: 1;
    }
</style>

在这里插入图片描述

2.3

同级别的元素，relative，absolute，fixed，sticky定位会在static上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <p>absolute</p>
    </div>
    <div class="two">
        <p>static</p>
    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        box-sizing: border-box;
    }
    .one {
        position: absolute;
        background-color: red;
        top: 0;
        left: 0;
    }
    .two {
        position: static;
        background-color: blue;
        margin: 100px 0 0 100px;
        padding-top: 100px;
    }
</style>

在这里插入图片描述

2.4

非同级别的使用了relative，absolute，fixed，sticky的元素，他们的叠加顺序是以非static的最上层的祖级元素的z-index进行比较的，没有非static的祖级则用自身进行比较，与此元素的子元素的z-index无关，再高都没用。
文字描述不是很清晰，举几个例子：

example1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <p>absolute</p>
        <p>z-index:2</p>
        <div class="child">
            <p style="padding-left: 28px">absolute</p>
            <p style="padding-left: 28px">z-index:1</p>
        </div>
    </div>
    <div class="two">
        <p style="padding-left: 100px">absolute</p>
        <p style="padding-left: 100px">z-index:1</p>
        <div class="child">
            <p style="padding-left: 28px">absolute</p>
            <p style="padding-left: 28px">z-index:99</p>
        </div>
    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        box-sizing: border-box;
    }
    div .child {
        width: 100px;
        height: 100px;
        margin: 0 0 0 70px;
        position: relative;
        font-size: 14px;
    }
    .one {
        position: absolute;
        background-color: red;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .one .child {
        background-color: palevioletred;
        z-index: 1;
    }
    .two {
        position: absolute;
        background-color: blue;
        top: 100px;
        left: 100px;
        z-index: 1;
    }
    .two .child {
        background-color: purple;
        z-index: 99;
    }
</style>

example2

可以实现父元素在底下，子元素在上面的情况。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <p>static</p>
        <div class="child">
            <p style="padding-left: 28px">relative</p>
            <p style="padding-left: 28px">z-index:1</p>
        </div>
    </div>
    <div class="two">
        <p style="padding-left: 100px">static</p>
        <div class="child">
            <p style="padding-left: 28px">static</p>
        </div>
    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        box-sizing: border-box;
    }
    div .child {
        width: 100px;
        height: 100px;
        margin: 0 0 0 70px;
        font-size: 14px;
    }
    .one {
        position: static;
        background-color: red;
    }
    .one .child {
        position: relative;
        background-color: palevioletred;
        z-index: 1;
    }
    .two {
        position: static;
        background-color: blue;
        margin: -150px 0 0 75px;
    }
    .two .child {
        position: static;
        background-color: purple;
    }
</style>

example3

稍微复杂一点的情况
在这里插入图片描述

2.5

最后再来看一种被transform影响到的情况。

父级红色未加transform

在这里插入图片描述

父级红色加了transform

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <div class="oneChild"></div>
    </div>
    <div class="two">

    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
    .one {
        position: static;
        background-color: red;
        /*transform: translate(1px,1px);*/
    }
    .oneChild {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 50px 0 0 50px;
        position: relative;
        z-index: 2;
    }
    .two {
        position: absolute;
        background-color: blue;
        top: 100px;
        left: 100px;
        z-index: 1;
    }
</style>

收起

展开全文

position css

Transformer中的position encoding(位置编码一)
千次阅读 多人点赞 2021-12-24 20:15:01
本文主要讲解Transformer 中的 position encoding，在当今CV的目标检测最前沿，都离不开position encoding，在DETR，VIT，MAE框架中应用广泛，下面谈谈我的理解。一般position encoding 分为正余弦编码和可学习...
本文主要讲解Transformer 中的 position encoding，在当今CV的目标检测最前沿，都离不开position encoding，在DETR，VIT，MAE框架中应用广泛，下面谈谈我的理解。

一般position encoding 分为正余弦编码和可学习编码。

正余弦编码

以下为DETR中的position encoding过程，本文将以简单的数据帮助大家理解。以下过程是按照DETR走的，为了更好理解，对数据进行简化，针对不同的图像，产生不同的数据大小。

1.创建mask

假设mask为4×4大小，输入图像大小为3×3。

下图为mask生成的4*4维度的矩阵，根据对应与输入图像大小3*3生成以下的mask编码tensor，下右图为反mask编码tensor，这一步就得到了图像的大小及对应与mask下的位置。

2.生成Y_embed和X_embed的tensor
```
y_embed = not_mask.cumsum(1, dtype=torch.float32)#在行方向累加#(b , h , w)
x_embed = not_mask.cumsum(2, dtype=torch.float32)#在列方向累加#(b , h , w)
```
DETR中运用两行编码实现Y_embed和X_embed，生成大小为（bitch_size , h , w）的tensor。

根据在1中我们产生的反mask编码，生成的Y_embed和X_embed如下。

Y_embed对为mask编码True的进行行方向累加1，X_embed对为mask编码True的进行列方向累加1。下图所示：

3. 运用10维（自己可以延申为1024维）position进行编码
```
num_pos_feats = 10
temperature = 10000
dim_t = torch.arange(num_pos_feats, dtype=torch.float32,device=a.device)#生成10维数
dim_t = temperature ** (2 * (dim_t // 2) / num_pos_feats) #i=dim_t // 2#对10维数进行计算
```
第三行代码生成了10个tensor数据，第四行代码相当于 $dim_t=10000^{2*(dimt1//2)/10}$ ，对10个生成的tensor进行计算得到位置编码公式中的分母 $10000^{2i/d}$ ，结果如下。

4.生成pos_x以及pos_y
```
pos_x = x_embed[:, :, None] / dim_t
pos_y = y_embed[:, :, None] / dim_t
pos_x = torch.stack((pos_x[:, :, 0::2].sin(), pos_x[:, :, 1::2].cos()), dim=3).flatten(2)#不降维
pos_y = torch.stack((pos_y[:, :, 0::2].sin(), pos_y[:, :, 1::2].cos()), dim=3).flatten(2)#不降维
```
第四步以后的直观效果如上图所示，可以对照第二步的X_embed和Y_embed，会发现pos_x,y的tensor分母和X,Y_embed对应，很好理解，其中i对应的是10维position的不同维度的数，d代表的是position编码维度。

5.组合Pos_x和Pos_y

因为上述位置编码的生成是行列方向分开的，这一步需要进行组合。
```
pos = torch.cat((pos_y, pos_x), dim=2)
```
组合以后直观图的样子如上，这时会发现16个位置的分母已经根据pos的不同，达到了位置编码的不同，因为本文采用的是10维的position，分子i的范围为0-10，每个位置就形成了1*20的tensor数据。

上述两个位置的编码就可以理解为1*20的tensor数据，因为比较长，分开写了，不是4*5的，而是1*20的tensor数据，通过上图可以很直观的理解position encoding。

程序结果如下，类似于此。下面将自己改写的简单的position encoding 程序段放在下面，大家可以复制自己跑一下，看看输出结果，加强理解。
```
import torch
import numpy as np
import math

#正余弦位置编码
num_pos_feats = 10
temperature = 10000
normalize = False
scale = 2 * math.pi

a = np.array([[1, 2, 3], [4, 5, 6], [7, 8, 9]])
a = torch.tensor(a)
mask = [[False,False,False,True],[False,False,False,True],[False,False,False,True],[True,True,True,True]]
mask = torch.tensor(mask)
print(mask)
assert mask is not None
not_mask = ~mask
print(not_mask)
y_embed = not_mask.cumsum(0, dtype=torch.float32)
x_embed = not_mask.cumsum(1, dtype=torch.float32)
print(y_embed)
print(x_embed)

if normalize:
    eps = 1e-6
    # b = a[i:j:s]表示：i,j与上面的一样，但s表示步进，缺省为1.
    # 所以a[i:j:1]相当于a[i:j]
    # 当s<0时，i缺省时，默认为-1. j缺省时，默认为-len(a)-1
    # 所以a[::-1]相当于 a[-1:-len(a)-1:-1]，也就是从最后一个元素到第一个元素复制一遍，即倒序。
    # 对于X[:,:,m:n]是取三维矩阵中第m维到第n-1维的所有数据
    # 归一化
    y_embed = y_embed / (y_embed[-1:, :] + eps) * scale  # y_embed[:, -1:, :]代表取三维数据中的最后一行数据
    x_embed = x_embed / (x_embed[:, -1:] + eps) * scale  # x_embed[:, :, -1:]代表取三维数据中的最后一列数据
    print(y_embed)
    print(x_embed)
dim_t1 = torch.arange(num_pos_feats, dtype=torch.float32,device=a.device)
print(dim_t1)
dim_t = temperature ** (2 * (dim_t1 // 2) / num_pos_feats) #i=dim_t1 // 2
print(dim_t)
pos_x = x_embed[:, :, None] / dim_t
pos_y = y_embed[:, :, None] / dim_t
print(pos_x)
print(pos_y)
pos_x = torch.stack((pos_x[:, :, 0::2].sin(), pos_x[:, :, 1::2].cos()), dim=3).flatten(2)#不降维
pos_y = torch.stack((pos_y[:, :, 0::2].sin(), pos_y[:, :, 1::2].cos()), dim=3).flatten(2)#不降维
print(pos_x)
print(pos_y)
pos = torch.cat((pos_y, pos_x), dim=2)
print(pos)
```
以上是我的理解，欢迎大家批评指正，互相交流！Transformer中的position encoding(位置编码二)_zuoyou-HPU的博客-CSDN博客本文依旧采用4*4大小的词嵌入模型，和模仿3*3大小的特征图进行解读——可学习编码1.根据自己模型中的定义的最大特征图大小进而定义词嵌入模型大小。假设模型中的特征图大小不超过4*4，那么我定义的词嵌入模型大小就为4*4，同正余弦编码一样，采用10维数据进行编码。生成行方向的词嵌入模型(4 ,10)，及生成列方向的词嵌入模型(4 , 10)，进而生成4*10的随机权重值并均匀分布在0-1之间。row_embed = nn.Embedding(4, 10)#生成行方向词嵌入模型col_embe.https://blog.csdn.net/weixin_42715977/article/details/122139883?spm=1001.2014.3001.5501

Swin Transformer 中的 shift window attention_zuoyou-HPU的博客-CSDN博客https://blog.csdn.net/weixin_42715977/article/details/124151870?spm=1001.2014.3001.5502
收起
展开全文
深度学习人工智能
HTML的position详解
万次阅读 多人点赞 2018-08-23 19:52:11
先对自己理解的position做一个总结， 1、static：static是所有元素的默认属性，也就是可以理解为正常的文档流 2、relative:relative是相对于自己文档的位置来定位的，对旁边的元素没有影响 3、absolute：absolute...
今天上课半斤八两半斤八两的我突然不愿意听课，于是突然有了雅兴来解决自己这几天的疑惑。

先对自己理解的position做一个总结，

1、static：static是所有元素的默认属性，也就是可以理解为正常的文档流

2、relative:relative是相对于自己文档的位置来定位的，对旁边的元素没有影响

3、absolute：absolute是相对于父标签来进行定位的，如果没有父标签或者父标签是static，那么sorry，刚烈的absolute会相对于文档定位（不同于fixed相对于浏览器定位）

4、fixed；牛逼的fixed，是相对于浏览器窗口来定位的。不会因为滚动条滚动，牛了一笔。（但是平常卵用不多，我自己的吐槽）

原文来自：https://blog.csdn.net/FungLeo/article/details/50056111

Css 详细解读定位属性 position 以及参数

position 定位属性，是CSS中非常重要的属性。除了文档流布局，就是定位布局了。本来我对这个问题没有放在心上，毕竟写了这么多年的css，对position的各类使用是烂熟于心的。但是今天突然发现，居然很多人都不清楚position参数。因此，特地写这篇博文，详细解读一下position 以及参数。

基础资料

首先，我们可以到 W3SCHOOL 关于 position 的详细介绍页面，来看一下position的资料。

其参数主要有以下：

absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
规定应该从父元素继承 position 属性的值。

static 默认值，就是没有定位，那就没必要多解释了。inherit 继承父元素，基本上这个参数用得相当少，所以也不做过多的解释。

文档流布局的概念

什么是文档流布局？我百度了一下相对严谨的解释:

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。
每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。
内联元素也不会独占一行。几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素。
有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。但是在IE6中浮动元素也存在于文档流中。

关于浮动会脱离文档流，这里我就不解释了。因为我们一般会大力避免这种问题，而使用清除浮动的方法。上面引用的文字中，绝对定位 是指 position:absolute ，而 固定定位 是指 position:fixed。

如上图所示，这就是正常的文档流布局。一个一个挨着的，到头了，另起一行，接着排布。

理解文档流布局，是理解本文的基础，文档流布局也是css布局最基础的知识。这里就不详细赘述了。

position:relative 相对定位

什么是相对定位？相对什么定位？这是重要的问题。我的回答是——相对自己文档流中的原始位置定位。它的特点是——不会脱离文档流。

也就是说，使用position:relative定位，其元素依旧在文档流中，他的位置可以使用 left、right、top、bottom、z-index等定位参数，但是，他的存在，还是会影响文档中紧跟在他周围的元素的。

无论多少文字描述，可能都无法让你理解。下面，我们看一下实际效果。

如上图的演示，我给test3加上了position:relative定位效果。代码如下：
```
position: relative;left: -20px;top: 20px;
```
- 1
大家可以清晰的从图上看出来，test3根据CSS参数left: -20px;top: 20px;发生了位移。

但是！但是！但是！重要的事情说三遍，它的唯一并没有对周围的元素有任何的影响！！它依然存在于文档流中。它的位移是根据它在文档流中的原始位置发生的！！这一点非常非常重要。

通过上面的图片和阐释，我相信大家都对position:relative参数有了深刻的理解了。但这没完。下面我们还有关于它的内容。

position:fixed 相对浏览器定位

相比而言，这个参数是最好理解的。它相对于浏览器的窗口进行定位。同时——它会脱离文档流

好，还是上图片。

代码如下：
```
position: fixed;right:20px;top: 20px;
```
- 1
这是初始状态，我们可以看到它的特点：
1. 它脱离了文档流，原来文档流中不存在它的位置，test4好像test3不存在一样的紧贴在了test2的后面。
2. 它的right:20px;top: 20px;参数是相对浏览器窗口定位的。

好，我们再来看一下，当页面发生滚动的效果图。

当页面发生了滚动，我们可以看到，页面的内容已经根据滚动条的位置发生了位移。但是我们的test3 依旧是在相对于浏览器的位置。

通过上面的图文阐释，我相信，大家对于 position:fixed 参数已经有了深刻的理解了。

其实position:fixed不难理解。

position:absolute 绝对定位

绝对定位是一个非常牛逼的属性，牛逼到，你不知道会发生什么。注意，它的解释是什么——“生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。”

也就是说，它可以相对于各种各样的东西进行定位。除了 static 其他都可以！！！注意！注意！注意！ 是除了！

也正是因为这一牛逼特性，导致很多人对此概念混乱。其实，这个一点也不混乱，我们可以将概念理顺了，分成几个情况来说。

PS:position:absolute和position:fixed一样是会脱离文档流的。这里就不解释脱离文档流的问题，主要研究它的定位问题。

它的所有父元素的属性都是 position:static

怎么理解这个标题？position:static 是所有html元素默认参数。就是说，这个元素的所有上级元素，你都没有使用过定位方式。

我们通过如下代码模拟一个场景：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>
```
如上，test3是test2的子元素，test1的孙元素。我们来看一下效果图：

如上图所示。我们可以看到，test3既没有相对于父元素定位，也没有相对于爷元素定位。它居然和position:fixed一样！相对于浏览器定位了！！

！！！这是一个错觉！！！

我们来看一下浏览器发生滚动之后的效果，如下图所示：

如上图所示，它并非是相对于浏览器定位，而是相对于文档定位。

如果你有一点js基础的话，那么应该很容易理解。$(document)和$(window)的差别（为了看得清楚，用了JQ写法）

相对于文档，就是相对于整个页面来进行布局，而相对于窗口，则是相对于浏览器的可视区域进行定位，这二者有本质的区别的。

这种情况在实际应用中有，但是不多。下面，我们再来看其他情况。

它的父元素的属性是 position:relative

上面，我们已经说过了，position:relative是相对于自身原始位置定位，其自身并没有脱离文档流。而它的子元素，使用position:absolute参数是什么效果呢？我们来做个试验。下面是代码：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: relative;left: 50px;top: 50px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: -20px;top: -20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>
```
我们给test2加上了position:relative属性，并给出了偏移值，然后，再给test3使用绝对定位，使用了为负数的偏移值，我们来看一下效果图，如下：

从上图我们可以看到，test2如我们所愿的，相对于自身的位置发生了偏移，而test3则相对于test2发生了偏移。

从这个试验我们可以看出，当一个元素设置了position:absolute属性之后，而它的父元素的属性为position:relative则，它不再是相对于文档定位，而是相对于父元素定位。

这一点非常重要。最最重要的是，父元素设置为position:relative并不会脱离文档流，也就是说——利用给父元素设置position:relative属性，再将子元素设置为position:absolute就可以在文档流中实现需要的定位

这一点异常重要，也是非常常用的方法！（PS:基本上焦点图等常见应用，都是使用了这种方式）

它的父元素的属性是 position:fixed

上面，我们说了父元素为position:relative的情况，这种情况比较常见，那么它的父元素为 position:fixed 又是什么情况呢？如果你聪明的话，应该有了答案。我们来做一个试验，来印证一下你的想法。代码如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: fixed;right: 20px;top: 20px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;left: -40px;top: 40px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>
```
好，我们可以看到我给test2加上了position: fixed;right: 20px;top: 20px; 它会相对于浏览器窗口定位，而test3作为test2的子元素，我们加上了position: absolute;left: -40px;top: 40px;那么，根据我们的想象，它应该相对于test2作出偏移。那么是不是这个情况呢？我们来看一下效果图：

如上图所示，看到了具体的效果了吧！是不是和你想象的是一样的呢？

它的父元素的属性是 position:absolute

好，我们来看一下，如果position:absolute嵌套position:absolute元素将会出现什么情况呢？

写了这么多，其实你应该有了一定的预见性了吧？好，我们来做试验，代码如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: absolute;right: 20px;top: 20px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>
```
如上所示，test2我们使用了position: absolute;right: 20px;top: 20px;参数，那么，它会相对于文档作出设定的偏移值。而我们给test3使用了同样的css样式。如果test3也是相对于文档定位的话，那么它和test2应该是重叠的。

但是，我们根据上面的解释，test3应该相对于test2定位才对，那么是不是呢？我们看效果图：

如上图所示，果然，test2相对于文档偏移，而test3相对于test2偏移。

position 以及参数总结
1. position: relative;不会脱离文档流，position: fixed;position: absolute;会脱离文档流
2. position: relative; 相对于自己在文档流中的初始位置偏移定位。
3. position: fixed; 相对于浏览器窗口定位。
4. position: absolute; 是相对于父级非position:static 浏览器定位。
  如果没有任何一个父级元素是非position:static属性，则会相对于文档定位。
  这里它的父级元素是包含爷爷级元素、祖爷爷级元素、祖宗十八代级元素的。任意一级都可以。
  如果它的父级元素和爷爷级元素都是非position:static 属性，则，它会选择距离最近的父元素。
本文为 FungLeo by FengCMS 原创，转载，请无比保留此申明！
收起
展开全文
CSS--解决position: absolute无效的问题
千次阅读 多人点赞 2021-12-01 00:11:06

本文介绍CSS进行定位时使用 position:absolute （绝对定位）却不起作用的问题。需求：已有一个外层的元素（class为"container"），这个外层元素已经设置了margin，现在有一个元素（class为"test"），放在这个外层...

收起

css html position
CSS背景background详解，background-position详解
千次阅读 多人点赞 2021-02-03 18:04:38

/* 继承父元素的 background-repeat 属性*/ 【重点】背景定位(background-position) background-position 属性用来控制背景图片在元素中的位置。技巧是，实际上指定的是图片左上角相对于元素左上角的位置。下面的...

收起

css
position fixed居中
千次阅读 2021-06-13 14:16:17

position:fixed div如何居中据闻是以left right top bottom来定位的，那么剧中是怎么做的上下左右居div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;}一个position：...

收起
Position Embedding 的解释及具体应用
千次阅读 2020-11-13 16:22:51

Position Embedding 的解释及具体应用这是我的第一篇博客，想把博客作为分享巩固自己学习感悟的地方。最近做了一个要用到Position Embedding 的项目，于是就研究了一下。词向量词向量，顾名思义就是把每一个...

收起

自然语言处理 pytorch 神经网络机器学习
MySQL POSITION()用法及代码示例
千次阅读 2021-01-19 07:31:06

POSITION()：MySQL中的此函数用于查找字符串中子字符串的位置。它将返回字符串中子字符串首次出现的位置。如果字符串中不存在子字符串，则它将返回0。在字符串中搜索子字符串的位置时，该函数将不执行区分大小写的...

收起
Unity LocalPosition赋值
千次阅读 2021-12-01 11:08:19

transform.localPosition和transform.localScale都是直接赋值三元数，给旋转赋值需要用　方法一：　transform.localEulerAngles = new Vector3 (0.0f,0.0f,0.0f); 　方法二：　transform.rotation=Quaternion....

收起

unity3d c# unity
position的4个值和用法
千次阅读 2020-06-07 19:56:46

1. position的4个值我理解的四个值为 absolute relative fixed sticky 2. 用法 2.1 absolute position:absolute 绝对定位 TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL) 如果元素没有设定TRBL并且父级没有设定...

收起

css
Springfox (Swagger) - ApiOperation 注解中的 position 方法无效的拓展解决方案
千次阅读 2020-03-17 12:22:32

写在前面如果你有现在使用 Springfox 的经历的话，可能就有对 api 进行分组以及排序等需求，而Springfox(应当说是Swagger更确切)...那就是使用ApiOperation注解的position方法，但是很不幸的是该方法已经标记为过...

收起

java
详解position:sticky
千次阅读 2020-02-14 10:29:21

今天被人问到position:sticky的使用,由于css这块特效做的不多.深知自己的短板.于是痛定思痛.决定好好积累遇到的css问题先说一下sticky这个属性的定义 sticky: 元素根据正常文档流进行定位，然后相对它的最近...

收起
Visual C++ POSITION用法解释，POSITION是什么？
千次阅读 2019-05-02 21:38:24

POSITION是MFC模板类库中经常使用的一个数据类型，我们从它的定义可以看出，其实，它就是一个指针。 // abstract iteration position struct __POSITION { }; typedef __POSITION* POSITION; MFC给出的注释是：...

收起

POSITION
position:fixed失效的几种情况
千次阅读 2021-04-16 11:27:04

在许多情况下，position:fixed 将会失效。MDN 用一句话概括了这种情况：当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。 What！还有这种操作？可能有部分同学还没 get 到上面这句话的意思，...

收起
transformer中的相对位置偏置的介绍（relative position bias）
千次阅读 2021-08-23 12:49:53

在很多近期的transformer工作中，经常提到一个词： relative position bias。用在self attention的计算当中。笔者在第一次看到这个概念时，不解其意，本文用来笔者自己关于relative position bias的理解。笔者第一...

收起

深度学习 pytorch
css如何取消定位position？
千次阅读 2021-06-13 10:13:26

在网页制作的过程中，经常会使用position来定位元素实现布局，那么，若想取消定位，应该怎么操作呢？下面本篇文章举例讲解CSS如何取消定位position。css如何取消定位position？1、新建一个html文件，命名为test.html...

收起
MFC中POSITION类详解
千次阅读 2016-03-26 11:41:29

POSITION用法解释 VC6.0 MFC中：POSITION用法解释 MFC中POSITION究竟是一个什么类型，CStringList类解释关于MFC的POSITION 来源：POSITION用法解析 POSITION是MFC模板类库中经常使用的一个数据类型，我们从它的...

收起

POSITION类
position之static
千次阅读 2020-01-18 11:59:02

position ：static 静态定位/常规定位/自然定位作用：使元素定位于常规流/自然流中特点：忽视top、bottom、left、right、z-index，是这些关键字作用失效如果两个元素都设置了外边距，最终的外边距取...

收起
position:sticky介绍
千次阅读 2020-09-08 14:48:24

用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大...position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative;

收起

css javascript
position定位属性值有几个
千次阅读 2021-06-10 17:10:39

position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值，元素处于正常...

收起

css html
position(五种属性，以及每个属性的特点)
万次阅读 多人点赞 2019-10-28 15:34:08

1. position: relative;相对定位 1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性） 2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置） 3> 没有定位偏移...

收起
CSS里面position：relative与position：absolute 区别
千次阅读 2019-07-10 11:34:36

position：absolute这个是绝对定位；是相对于浏览器的定位。比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position：relative是相对定位，是相...

收起
transform.position 绝对位置与相对位置
千次阅读 2021-12-15 10:02:58

在unity中，transform.position可以直接设置物体的位置。但是有时候我们会发现这样设置的位置有可能与unity面板中显示的值不同。这是因为transform.position设置的是绝对位置，原点是世界坐标原点，面板中显示的...

收起

unity 游戏引擎
css中background-position属性
千次阅读 2021-12-09 22:54:47

background-position属性在css中用来设置背景图片的位置，它通过设置水平方向和垂直方向的取值来到达效果 background-position的常见三种定义方式 1.关键字取值通过使用关键字来定义图片的位置。其中水平方向...

收起
label-position不生效
千次阅读 2021-07-12 17:24:31

通过 label-position 属性来改变表单域或标签的位置，可选的值有 top/left/right ，默认的是 right ，lable-position 必须要和 label-width（表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值）共同...

收起

vue javascript
局部坐标(localPosition) && 世界坐标(Position)
千次阅读 2020-08-30 20:06:11

官方文档介绍 1.1 Transform.Position 1.2 Transform.localPosition 2 问题 2.1 Position真的不会受到父物体的影响吗 1. 官方文档介绍 1.1 Transform.Position 当前物体在世界空间中的位置，即世界坐标，(按分析)...

收起
CSS 背景位置 background-position属性
万次阅读 多人点赞 2018-02-17 20:52:35

背景位置除了背景背景平铺外，CSS还提供了另一个强大的功能，即背景...通过 background-position属性，可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为：background-position: xpos ypo...

收起

CSS
transform.position与transform.localposition区别
千次阅读 2019-04-23 15:32:54

1. position是根据世界原点为中心,为绝对坐标 2. localPosition是根据父节点为中心,如果没有父节点,localpositon和position是没有区别的 transform栏中看到的是相对坐标 ...

收起
position：relative
万次阅读 2019-07-30 09:53:06

1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来作为参照对象偏移定位，而不是相对于浏览器窗口，并且相对定位的块元素脱离标准流浮上来后，无论是否进行移动，其所占...

收起