精华内容
下载资源
问答
  • 由于fixed会使元素脱离文档流,让该div不与其他div重叠有两种方法 高度固定的情况 方法一:设置下方区域的padding-top padding-top: XXpx 方法二:设置fixed所在div的top和left position: fixed; top: 0; ...

    由于fixed会使元素脱离文档流,让该div不与其他div重叠有两种方法

    高度固定的情况

    方法一:设置下方区域的padding-top

    padding-top: XXpx
    

    方法二:设置fixed所在div的top和left

    position: fixed;
    top: 0;
    left:0;
    

    以及下方区域的margin-top

    高度可变的情况需要获取fixed的div的动态高度:

    在这里插入图片描述
    方法一:设置设置可滚动区域的marginTop值
    获取高度可变区域的高度并设置下方div的marginTop

    // 获取高度可变区域的高度
    var height = document.getElementsByClassName('top_container')[0]
    console.log(height.offsetHeight)
    var tar = document.getElementsByClassName('mid_container')[0]
    tar.style.marginTop = height.offsetHeight + 'px'
    

    设置
    fixed所在div的top和left

    position: fixed;
    top: 0;
    left:0;
    

    方法二:设置可滚动区域的paddingTop值
    获取高度可变区域的高度并设置下方div的paddingTop

    // 获取高度可变区域的高度
    var height = document.getElementsByClassName('top_container')[0]
    console.log(height.offsetHeight)
    var tar = document.getElementsByClassName('mid_container')[0]
    tar.style.paddingTop = height.offsetHeight + 'px'
    

    注意:vue的画代码写在mounted()中,不能卸载befoMount()中

    展开全文
  • position属性absoluterelative 详解

    千次阅读 2012-12-13 15:48:57
    这里是两篇讲解position用法的文章,讲的很好,第一章讲的太容易理解,但却是非常实用的,第二篇,讲的比较易懂,却讲的有点浅显,只要耐着性子学,总是会有明白的那一天的。position的这两个属性,却是容易理解...

    这里是两篇讲解position用法的文章,讲的很好,第一章讲的不太容易理解,但却是非常实用的,第二篇,讲的比较易懂,却讲的有点浅显,只要耐着性子学,总是会有明白的那一天的。position的这两个属性,却是不容易理解和讲解的。

    NUM.1 

    详解定位与定位应用

    定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。
        定位的定义:
       在CSS中关于定位的内容是: position:relative | absolute | static | fixed
        static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
        relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
          absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
        fixed(固定定位) 这里所固定的参照对像是 可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

    CSS中定位的层叠分级: z-index: auto | namber;

    auto
    遵从其父对象的定位
    namber    无单位的整数值。可为负数
    定位的原理:

    1.可以位移的元素 (相对定位)

      在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,也可以通过margin来让元素产生位置移动。但事实上那并非是真实的位移,因为,那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left(下称TRBL,TRBL可以折分使用。)针对一个相对定位的元素所产生的。我们看下面的图:
    详解定位与定位应用
    我们看图中是一个相对定位的元素
    #first {
    width:200px;
    height: 50px;
    margin:25px;
    border:25px solid #333;
    padding:25px;
    position:relative;
    top: 50px;
    left: 50px;
    }
    而下方是一块默认定位的黑色区块
    #second {
    width:400px;
    height:75px;
    margin:0;
    border:0;
    padding:0;
    backgroud-color:#333;
    }
          我们看到这个处在文本流的区块被上面的相对定位挡住了一部分,这说明:“当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值。并且我们发现当相对定位元素进行位移后,表现内容已经脱离了文本流,只是在本文流中还为原来的相对对定位留下了原有的总宽与总高(内容的高度或是宽度加上 margin\border\padding的数值)。这说明在相对定位中,虽然表现区脱离了原来的文本流,但是在文本流中还还有此相对定位的老窩。这点要特别注意,因为在实际应用中如果相对定位的位移数值过大,那么原有的区域就会形成一块空白。
          并且我们注意,定位元素的坐标点是在margin值的左上边缘点,即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。
    2.可以在任意一个位置的元素(绝对定位)

          如上所述:相对定位只可以在文本流中进行位置的上下左右的移动,同样存在一定的局限性,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位,如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素,使之处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。看下图:
    详解定位与定位应用
        上图可知,文本流中的内容会顶替绝对定位无素的位置,一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中,定位元素将会跑到网页的左上角,因为那里是他们的被绝对定位后的坐标原点。
    3.被关联的绝对定位

        上面说的是单一的绝对定位,而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性,但是又希望绝对定位的坐标原点可以固定在网页中的某一个点,当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动,而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。

    虽然是如此,但是这个坐标原点却并不是父级的坐标原点,这是一个很奇怪的坐标位置。我们看一下模型图示:
    详解定位与定位应用

    我们看到,这个图中父级为黑灰色区块,子级为青色区块。父级是相对定位,子级是绝对定位。子级设置了顶部位移50个像素,左倾位移50个像素。那么我们看,子级的坐标原点并不是从父级的坐标原点位移50个像素,而是从父级块的padding左上边缘点为坐标起始点(即A 点)。而父级这里如果要产生位置移动,或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。

    这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话,相信看完对这里对定位的解释一定可以把定位使用得随心所欲。

    4.总在视线里的元素 (固定定位)

        position:fixed; 他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。


    原文地址:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html



    NUM2:

    解读absolute与relative 

    很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。

    Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

    一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。

    Relative,CSS中的写法是:position:relative;  他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

    有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

    文章出处:http://www.blueidea.com/tech/web/2006/4249.asp


    展开全文
  • 安卓IOS样式兼容,position:absolute

    千次阅读 2018-08-27 17:32:51
    经查,因为父元素display:flex布局的原因,导致安卓ios兼容,换掉该布局方式,其子元素继续使用position:absoulte则样式正常 ---- 2019/03/18更新 再次实践证明,当父元素为display:flex,子元素为position....

    样式用到position:absoulte  在微信开发者工具和安卓真机测试,样式正常,然而ios系统真机测试显示不正常。

    经查,因为父元素display:flex布局的原因,导致安卓与ios不兼容,换掉该布局方式,其子元素继续使用position:absoulte则样式正常

     

    ---- 2019/03/18更新

    再次实践证明,当父元素为display:flex,子元素为position:absolute时。在苹果6s/6P(ios10)的系统下会出现兼容问题,子元素无法居中。所以当子元素要用position:absolute,父元素不能是flex布局。否则会出现兼容问题(chrome开发工具测不出问题,真机才能测出问题)

    展开全文
  • display和position的值作用

    千次阅读 2017-02-21 20:13:35
    描述display和position的值及其作用,和一些相关知识点

    1、display属性的值与作用

       常用的值有none、inline、block、inline-block

       none

         1)表示该元素不会显示,并且该元素的空间也不存在,可理解为已删除;

         2)visibility:hidden只是将元素隐藏,但不会改变页面布局,但也不会触发该元素已经绑定的事件;

         3)opacity:0,将元素隐藏,不会改变页面布局,但会触发该元素绑定的事件。

       inline

         1)内联元素,与其他元素在一行;

         2)不可设置宽高;

         3)margin-top与margin-bottom无效,但margin-left与margin-right有效;

         4)padding-left与padding-right同样有效,但是padding-top与padding-bottom不会影响元素高度,会影        响背景高度;

         5)常见的有<a>、<span>、<br>、<i>、<em>、<strong>。

       block

         块级元素,常见的有<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>

       inline-block

         1)行内块元素,即是内联元素,又可设置宽高以及行高及顶和底边距;

         2)常见的有<img>、<input>。

    2.position属性的值和作用

     position属性有四个可选值,分别为static、relative、absolute、fixed。

       static 

          默认值,元素出现在正常的文档流中,不会受left、top、right、bottom的影响。

       relative 

          相对定位,相对自身位置定位,可通过设置left、top、right、bottom的值来设置位置;

          并且它原本所占的空间不变,即不会影响其他元素布局;

          经常被用来作绝对元素的容器块。

       absolute 

          绝对定位,相对于最近的除static定位以外的元素定位,若没有,则相对于html定位;

          脱离了文档流,不占据文档空间;

          若设置absolute,但没有设置top、left等值,其位置不变;

          若设置absolute,会影响未定义宽度的块级元素,使其变为包裹元素内容的宽度。

       fixed 

          固定定位 相对于浏览器窗口定位,脱离文档流,不会随页面滚动而变化。

    展开全文
  • position:fixed IE中窗口定位

    千次阅读 2013-01-23 10:31:23
    大家都知道在CSS中的position:fixed能够使指定元素定位在窗口指定位置,但在IE中支持这个属性,FUCK! 所以我们只能再找其它的方法,实现原理无外乎top=scrollTop+位置坐标;left=scrollLeft+位置坐标;使用CSS中...
  • position:relativeabsolute的定位原点

    千次阅读 2020-09-02 10:55:22
    position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中; ②position:fixed 固定定位 是相对于浏览器窗口来进行定位; ③position:relative 相对定位 相对于其...
  • position属性absoluterelative 详解 转自:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性太了解,从网上...
  • CSS基础:浅谈position

    万次阅读 多人点赞 2021-02-23 10:52:36
    浅谈position 定位(position)允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置—— MDN 一、文档流 什么是文档流? "文档流"是在...
  • position:absolute定位起作用?溢出父元素隐藏了?的问题 总的原因还是对定位的理解错误。 position:absolute是相对父元素进行绝对定位的,且该父元素必须定义有position的值(relative、absolute、fixed),若...
  • 当一个标签打上position:absolute绝对标签后,当我们使用TRBL属性时,他所参照的对象是带有absolute或relative标签的父级(无限),如果所有父级都没有absolute或relative打上标签,则以BODY左上角点为参照(一句
  • CSS 背景位置 background-position属性

    万次阅读 多人点赞 2018-02-17 20:52:35
    背景位置除了背景背景平铺外,CSS还提供了另一个强大的功能,即背景...通过 background-position属性,可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为:background-position: xpos ypo...
  • 1、使用 position 这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现. 2、使用 absolute 如两个绝对定位对象的 z-index ...
  • relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。 absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取...
  • el-form的label-position不生效问题

    千次阅读 2020-05-30 14:27:33
    通过 label-position 属性来改变表单域或标签的位置,选的值有 top/left/right ,默认的是 right ,lable-position 必须要和 label-width(表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值) 共同...
  • css中position属性absoluterelative 详解

    千次阅读 2013-08-13 21:11:16
    最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记。 一.解读absoluterelative ...
  • Css 详细解读定位属性 position 以及参数

    万次阅读 多人点赞 2015-11-26 15:04:21
    Css 详细解读定位属性 position 以及参数position 定位属性,是...但是今天突然发现,居然很多人都清楚position参数。因此,特地写这篇博文,详细解读一下position 以及参数。基础资料首先,我们可以到 W3SCHOOL 关
  • position学习终结者(一)

    千次阅读 2014-06-11 21:02:35
    position学习终结者(一)
  • JS position属性之absoluterelative 详解

    万次阅读 2018-08-19 16:58:28
     很多朋友问过我absoluterelative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有...
  • css中z-index与position

    千次阅读 2008-01-07 17:49:00
    css提高篇(2)z-index与position属性的巧妙应用 将falsh置于最底层在falsh中加一参数:篇教程中,你将学会如何合理运用z-index属性,以及position属性,来遮挡你想遮挡的任何东西~实例中,我将用本站遮挡googlead中显示...
  • 详解background-position

    千次阅读 2018-05-02 21:26:57
    你真的了解background-positionbackground属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-color、background-image、background-repeat、background-attachment、background-position、...
  • 最全position定位方式解析

    千次阅读 2018-06-08 12:06:55
    position: 定位方式position: static; position: relative; position: absolute; position: fixed; position: inherit; position: initial; position: unset; position: sticky;通常,我们总是知道前面4种方式,...
  • position embedding学习

    千次阅读 2019-07-28 15:24:57
    transformer中在进行attention的时候,位置进行变化但是attention的结果一样,在attention之后进行全连接的时候虽然知道词之间的位置,但是attention的结果没有位置信息这个时候进行全连接也是能学习到位置信息的...
  • HTML的position详解

    万次阅读 多人点赞 2018-08-23 19:52:11
    今天上课半斤八两半斤八两的我突然愿意听课,于是突然有了雅兴来解决自己这几天的疑惑。 先对自己理解的position做一个总结, 1、static:static是所有元素的默认属性,也就是可以理解为正常的文档流 2、...
  •  通过Form的Position属性设置窗体的初始位置,如选择DesktopCenter为桌面中心,ScreenCenter为屏幕中心,等等。 这个属性在很多时候简化了程序代码。  但是,如果设置了position为ScreenCenter和...
  • 区别:定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但relative的区别是其在正常流中的位置在存在。 position各个属性值的定义: 1、static...
  • position定位的基准问题

    千次阅读 2016-12-14 12:47:15
    position 以父元素内容区+padding 为定位基准 以自身整体 margin+ border + padding+ content 为基准
  • 移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现。但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题。如图:如何解决: 查阅资料之后想到一下几种解决方法 1,使用position:...
  • CSS 布局 position 详解

    千次阅读 多人点赞 2018-06-01 11:39:23
    CSS 布局 position 详解1.position 之 static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。实例:!DOCTYPE html&gt; &lt;html lang="en"&gt...
  • 很遗憾的是支持……  最后,我无意中发现通过设置的固定定位(position:fixed)居然可以实现!  看你怎么滑动,都不会跟随滚动……  有兴趣的童鞋可以试试, JS代码如下 :   $...
  • iframe子页面position的fixed

    万次阅读 2015-12-03 15:52:46
    iframe子页面position的固定定位

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 326,282
精华内容 130,512
关键字:

position可数与不可数