精华内容
下载资源
问答
  • 在学习CSS,学到了了定位,在写...那么什么是固定定位了,固定定位是一种特殊的绝对定位,不占位置,只认浏览器的可视窗口为标准,不随滚动条发生变化。 接下来直奔主题,就是我固定定位的时候只给除了position:f...

    在学习CSS,学到了了定位,在写代码的时候发现了一个小问题关于固定定位的。
    首先我阐述一下什么是定位,定位就是将盒子定在某一位置,自由的漂浮在其他盒子的上面(这些盒子包括标准流和浮动),定位的语法为:定位=定位模式+边位移。那么什么是固定定位了,固定定位是一种特殊的绝对定位,不占位置,只认浏览器的可视窗口为标准,不随滚动条发生变化。
    接下来直奔主题,就是我固定定位的时候只给除了position:fixed,而没给出边位移,代码如下:
    在这里插入图片描述
    执行的结果如下图所示:
    在这里插入图片描述
    我想要的结果就是类top块元素div是固定定位在顶端,然后fix块元素显示整体,不要顶端被.top块元素压住,所以用了外边距margin-top,但是在类fix块元素中使用外边距margin-top后,使得整体都下移了,就出现了结果图中两个问题(1)顶端有空白的一行现象(2)没有达到预期的结果,就是标准流不被定位压在上面的视觉感。
    经过前期学习与总结发现了问题所在,先来一一澄清:
    (1)其实同时解决问题二,对于问题一存在的问题,标准解释就是,嵌套关系的外边距合并,准确说明可以为:body标签为父元素,在垂直方向上没有任何声明(比如顶边框),因此.fix类的div中声明顶部外边距会导致整体下移,解决方法有l两种分别如下:
    (1)为父元素添加上边框,border-top:1px solid transparent;
    (2) 为父元素定义上内边距
    其实嵌套关系中还有个解决方法就是在父元素中加入overflow:hidden,但是在这个代码问题背景下,是不行的。
    (2)对于问题二,其实同时解决问题一,原因就是固定定位是以body为标准,因此整体下移,所以定位的banner也会下移,解决方法很简单就是:
    position:fixed;
    top:0;

    解决结果如下:
    在这里插入图片描述

    展开全文
  • 特点:★元素使用绝对定位之后不占据原来的位置(脱标)★元素使用绝对定位位置是从浏览器出发。★嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发。★嵌套的盒子,父盒子使用定位,子...

    ◆绝对定位 Position:absolute;

    特点:

    ★元素使用绝对定位之后不占据原来的位置(脱标)

    ★元素使用绝对定位,位置是从浏览器出发。

    ★嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出

    发。

    ★嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素位置出

    发。

    ★给行内元素使用绝对定位之后,转换为行内块。(不推荐使用,推荐使用

    display:inline-block;)

    ◆相对定位  Position: relative;

    特点:

    ★使用相对定位,位置从自身出发

    ★还占据原来的位置。

    ★子绝父相(父元素相对定位,子元素绝对定位)

    ★行内元素使用相对定位不能转行内块

    ◆固定定位   Position:fixed;

    特点:

    ★固定定位之后,不占据原来的位置(脱标)

    ★元素使用固定定位之后,位置从浏览器出发。

    ★元素使用固定定位之后,会转化为行内块(不推荐,推荐使用display:inline-

    block;)

    展开全文
  • css定位中的固定定位

    千次阅读 2019-11-06 23:52:14
    完全脱标–完全不占位置; 只认浏览器的可是窗口 — 浏览器可视窗口 + 边偏移属性 来设置位置; 根腐元素没有任何关系; 不随滚动条滚动 命令显示图: 网页示例图: 注意: 1. 绝对定位/固定定位的盒子 不...

    固定定位是比较重要的一个所以单独来讲。

    固定定位(fixed)-重要

    固定定位是绝对定位的一种特殊形式:(认死理型)如果说绝对定位是一个矩形那么
    固定定位就类似于正方形。
    
    1. 完全脱标–完全不占位置;
    2. 只认浏览器的可是窗口 — 浏览器可视窗口 + 边偏移属性 来设置位置;
      1. 根腐元素没有任何关系;
      2. 不随滚动条滚动

    命令显示图:

    在这里插入图片描述

    网页示例图:

    在这里插入图片描述

    注意:

    1. 绝对定位/固定定位的盒子 不能通过设置 margin:auto 设置水平居中。
    2. 堆叠顺序 (z-index)

        堆叠顺序  (z-index)
             在使用定位布局时,可能会出现盒子重叠的情况。
             加了点位的盒子,默认后来居上,后面的盒子会压住前面的盒子。
             应用z-index层叠等级属性可以调整盒子的堆叠顺序。
          z-index 的特性如下:
              1. 属性值:正整数、负整数或0、默认值是0、数值越大,盒子越靠上;
              2. 如果属性值相同,则按照书写顺序,后来居上;
              3. 数字后面不能加单位
         注意: 只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、
             浮动和静态定位无效。
    

    命令显示图:

    在这里插入图片描述

    网页示例图:

    在这里插入图片描述

    3. 定位改变display属性

    display是显示模式,可以改变显示模式有以下方式;

    1. 可以用inline-block转换为行内块。
    2. 可以用浮动float默认转换为行内块(类似,并不完全一样,因为浮动是
      脱标的)。
    3. 绝对定位和固定定位也和浮动类似,默认转换的特性转换为行内块。
    

    所以说,一个行内的盒子,如果加了浮动、固定定位和绝对定位,不用转换,就可以给这个盒子
    直接设置宽度高度等。

    同时注意:

    浮动元素、绝对定位元素的都不会触发外边距合并的问题。也就是说,
    我们给盒子改为了浮动或者定位,就不会有垂直外边距合并的问题了。
    

    命令显示图:

    在这里插入图片描述

    网页示例图:

    在这里插入图片描述

    圆角矩形设置4个角:

    圆角矩形可以为4个角设置圆度,但是是有顺序的

     border-top-left-radius:20px;
     border-top-tight-radius:20px;
     border-bottom-right-radius:20px;
     border-bottom-left-radius:20px;
    

    如果4个角,数量相同:

    border-redius:15px;

    里面数值不同,我们也可以按照简写的形式,具体格式如下:

    border-radius: 左上角,右上角,右下角,左下角;
    还是遵循的顺时针。
    
    注意:
    1. 变偏移需要和定位模式联合使用,单独使用无效;
    2. top和bottom不要同时使用;
    3. left和right不要同时使用。
    
    网页布局总结

    一个完整的网页,有标准流、浮动、定位一起完成布局的。每个都有自己的专门用法。
    1. 标准流

    可以让合资上下排列或者左右排列的。
    

    2. 浮动

    可以让多个块级元素一行显示或者左右对齐盒子浮动的盒子就是按照顺序左右排列。
    

    3. 定位

    定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示,但是每个盒子需要测量数值。
    

    好了今天更新完了。。。

    展开全文
  • 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素,通过position属性来设置元素的定位 可选值: static:默认值,元素没有开启定位 relative:开启元素的相对定位 absolute...

     一、定位:
       

     定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素, 通过position属性来设置元素的定位
     可选值:
                             static:默认值,元素没有开启定位
                             relative:开启元素的相对定位
                             absolute:开启元素的绝对定位
                             fixed:开启元素的固定定位(也是绝对定位的一种)


    1. 当元素的position属性设置为relative时,则开启了元素的相对定位

                       1.当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化
                       2.相对定位是相对于元素在文档流中原来的位置进行定位
                       3.相对定位的元素不会脱离文档流
                      4.相对定位会使元素提升一个层级
                      5.相对定位不会改变元素的性质,块还是块,内联还是内联
     当开启了元素的定位(position属性值是一个非static的值)时,可以通过left right top bottom四个属性来设置元素的偏移量
                          left:元素相对于其定位位置的左侧偏移量
                          right:元素相对于其定位位置的右侧偏移量
                          top:元素相对于其定位位置的上边的偏移量
                          bottom:元素相对于其定位位置下边的偏移量
     通常偏移量只需要使用两个就可以对一个元素进行定位,  一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

    2. 当position属性值设置为absolute时,则开启了元素的绝对定位
                    

       1.开启绝对定位,会使元素脱离文档流
       2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
       3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位)如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
      4.绝对定位会使元素提升一个层级
       5.绝对定位会改变元素的性质, 内联元素变成块元素,块元素的宽度和高度默认都被内容撑开
           

    3.当元素的position属性设置fixed时,则开启了元素的固定定位


           固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样 ,不同的是: 

    固定定位永远都会相对于浏览器窗口进行定位  ,固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动,IE6不支持固定定位 

    4.层级

    如果定位元素的层级是一样,则下边的元素会盖住上边的,通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示,对于没有开启定位的元素不能使用z-index

    展开全文
  • 需求:进行某一操作后想将当前页面自动定位到某一元素或模块所在位置。 在HTML中,可以用<a href="#id"></a>实现跳转,小程序中则是用scroll-to-view来实现. 将整个页面最外层的view替换为scroll-view...
  • 一、定位 1、定位的定义 某个元素可以自由地在盒子上面移动,并且可以压着其他元素 当滚动窗口时,某个元素可以固定在页面上 可以让盒子自由的在某个盒子上...固定定位 边偏移(方位名词) 据定了元素的最终位置
  • relative:相对自身原来的位置定位,不脱标,原来位置仍保留 fixed:相对浏览器窗口来定位,脱离了文档流 absolute:相对第一个已经定位(position属性值不是static)的祖先元素定位,脱离文档流 如果没有祖先...
  • 关于Position:fixed固定定位后遇到的问题: 首先要理解 fixed 固定定位以后会使其脱离文档流,脱离文档流以后就会漂浮在页面上不会占据空间,导致以后的元素内容会上移,会被脱离文档流的元素遮挡。 解决方法 一般...
  • (1)绝对定位(position:absolute) ①相对于已经定位的父级元素去定位 ②若父级元素未定位,则相对于...①相对于自身默认位置定位 ②不脱离文档流,占有位置 ③主要作用是给绝对定位当父级元素用 (3)固...
  • CSS 固定定位 position fixed

    千次阅读 2020-02-26 14:12:27
    简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化; **注意:固定定位位置是 相对当前浏览器窗口的;** 代码示例: 1.我们先在页面中输出一个标准情况下的 div 元素,不...
  • 定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子。 定位的组成 定位是将盒子定位在某一位置。按照定位的方式移动盒子。 定位=定位模式+边偏移。 定位模式用于指定一...
  • 一、绝对定位 position:...绝对定位本身与文档流无关,因此不空间,元素会脱离文档流,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以 它们可以覆盖页面上其他的元素,并且可以通过z-index属性来...
  • CSS 提供了三种基本的定位机制:普通流、浮动和定位;通过这三种方式可实现页面的排版布局。 普通流 普通流中元素的位置由...通过定位可以让元素相对于其正常位置进行偏移出现在别的位置,或者相对于父元素、另一个元
  • position:有5种定位 ...只需要在滚动的时候动态加个class类名,加个固定定位 2.加个占位的父级元素 设置相应宽度 原因:动态添加fixed,并且不设置left right值 是相对于父元素的 高度是相对于浏览器的 ...
  • 元素原先在正常文档流中所的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 https://www.w3school.com.cn/css/css_positioning_absolu...
  • 如上所示,因为img脱离文档流title会占据img的位置,只需要给title添加一个上内边距高设置为img的高度,title就会回到自己原来的位置,如果img的高是动态的,这个padding也是得动态的,需要用js去获取高度,再添加。...
  • 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持...
  • 相对定位:是相对于该元素在普通流时的位置 元素仍保持其未定位前的形状,它原本所的空间仍保留。 就拿这三个div做比喻(这里就不给css代码了) <div class="father"> <div class="son1"></div&...
  • 占位置的符号_空白代码不占位置

    千次阅读 2021-05-26 09:55:56
    ˋ﹏ˊ word2003如何打出只占一个...王者荣耀空白符号不占位置亮点:-荣耀之王空白名称生成器应用程序是最新安装的B空间名称代码的最新可用Android版本; -开始界面和解决界面上,它主要用于玩家和朋友的空白名回...
  • css-绝对定位、相对定位、固定定位

    千次阅读 2020-01-31 20:48:29
    css中为了实现目标元素的布局,设计了三种元素的定位模式:绝对定位(absolute)、相对定位(relative)、固定定位(fixed。 语法: css选择器{ /*position的取值有四种:1)absolute-绝对定位; 2)relative-...
  • 弹性盒子与绝对/固定定位冲突问题

    千次阅读 2019-10-09 16:09:57
    但当弹性盒子跟固定/绝对定位一起使用时,就会发生问题,具体情况如下: <div class="flex-box"> <div class="option">1</div> <div class="option">2</div> <div class=...
  • CSS 提供了三种基本的定位机制:普通流、浮动和定位;通过这三种方式可实现页面的排版布局 普通流 普通流中的元素的位置由元素在 (X)HTML 中的位置决定 块级元素独自一行,在文本...定位是将元素定在某个位置,...
  • 盒子居中:margin:0 auto;浮动元素脱离了标准文档流d1盒子脱离了标准文档流,d2盒子因此成为了标准文档流第一个,位于页面左上方,d1盒子浮动在d2上 .d1{ float:red; background-color:red; width:100px;...
  • 在看看固定定位 position:fixed fixed和相对定位relative没什么绝对的关系,是根据浏览器窗口来决定位置的,这里我们给了小黑q球一个top:200px,虽然她的标签在oDIv中,但是并不会受oDiv位置的影响,这就是...
  • 多种定位方式,页面中的元素位置任你掌控。
  • 再向上滚动页面的时候,有时我们想让某些元素在滚动一定距离之后固定在某个位置,这个时候就可以用这种定位方式。 效果: 滚动前: 滚动后: 代码: <!DOCTYPE html> <html> <head> ...
  • 去除0x第一次后,字符串变成120x340x560x780x9A0xBC0xDE0xFF,现在第一个0x在索引2和索引3位置,去除0x第二次后,字符串变成12340x560x780x9A0xBC0xDE0xFF,第一个0x在索引4和索引5位置,所以每次去除的索引位置相比...
  • bootstrapTable定位固定滚动条

    千次阅读 2019-04-11 16:16:00
     当页面table列表数据有修改后,用户需要再次回到修改的行位置。 1.当修改行数据后,table刷新,行数据位置前后不发生改变 ,可使用下面这种方法:  /*获取当前滚动条的位置*/ var scollPostion = $('#...
  • 一般是用来定位头部导航栏,固定头部在最上方的位置,不会因为页面滚动产生影响 fixed是一个绝对定位的元素,是相对于整个浏览器窗口进行定位,相对定位一旦移动就会不占据原来的位置,后面的元素就会向上位移; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,905
精华内容 23,962
关键字:

固定定位如何占位置