前端女娲补天 CSS（十） position有哪些属性

最新推荐文章于 2024-06-18 16:11:06 发布
最新推荐文章于 2024-06-18 16:11:06 发布
阅读量72 收藏
点赞数
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiXenon/article/details/125036659
版权

position有哪些属性

  • static（默认）：元素出现在正常的文档流中 没有left top等 没有z-index
  • absolute：完全脱离文档流 相对最近一个有定位的父元素偏移，直到document块元素 在未设置宽度时撑开宽度
  • relative：不脱离文档流（保留原来位置，不会占用新位置）
  • fixed：基于浏览器窗口固定定位 可用来做一些导航栏 也可以做回到页面开头的按钮
  • sticky：在视口内relative，视口外fixed
    可以做一些头部或者搜索框导航栏之类的（父元素overflow:hidden会出错）
LiXenon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端的 position属性
Andybfw的博客
08-11 1336
CSS Position(定位) 常见的5个属性  static relative fixed absolute sticky----left right  top   bottom  4个属性值。 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法   1.static------HTML元素的...
女娲补天故事flash动画
07-24
女娲补天故事flash动画是一款新人教版三年级下册语文动画课件下载。
前端学习：CSS定位position属性的学习
wb13367115356的博客
08-08 208
首先，position属性是用来定位元素的，它是搭配left right top bottom来使用的，分别代表离左边的距离，离右边的距离...... 简单的一个例子进行演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ margin:
前端之路随笔小记：position属性详解
想不出一个好的标题，就用这个吧
11-03 1591
上篇博客用到的是position属性的fixed值，即固定定位，然后……上代码吧： body{background:#ccc8dc} h1.r-left{position:relative;left:-30px;} h1.r-right{position:relative;left:30px;} h2.abs{posit
前端开发时position属性的作用
别人笑我太疯癫，我笑他人看不穿。
06-04 1439
position是给前端元素增加定位方式的一个属性，我们要知道html本质上是一个需要浏览器等特定方式解析的语言，我们最终看的页面效果也是重头到位为解析之后的一个结果，本来所有的元素都是一个一个的按照他们的块类列，或行或列，被挨着解析出来，但在被解析中我们有时常常会有让某一个元素脱离原来展示顺序和位置的需求，这个时候就用到了position，下面是它每一个值的用途 static：默认值，不做任何特殊定位操作，一切按照它本来的样子 relative：相对定位，这个值单独使用的时候没有任何用处，因为它的官方解释
前端笔记——CSS定位（Position）属性详解！
qq_38211205的博客
02-29 1277
今天我们来谈谈什么CSS定位属性（ Position）？ 在了解之前，需要知道CSS的定位机制：它们分别有： 普通流、浮动流、定位流。 1、普通：上下排列的布局（注：大部分情况） 2、浮动：左右排列的布局（注：大部分情况） 3、定位：层叠（叠加）排列的布局 （注：大部分情况） 而在CSS中，定位属性（position）又分别有：如下几种： 1. position：static ; （默认值，没...
2女娲补天——学生学习课件
11-23
2女娲补天——学生学习课件
女娲补天说课 (3).ppt
10-27
女娲补天说课 (3).ppt
1女娲补天——学习ppt课件
11-23
1女娲补天——学习ppt课件
前端 position定位
qq_44327851的博客
12-25 1082
绝对定位的元素的位置是相对于它最近的已定位祖先元素（定位属性值为除 "static" 以外的任何值），如果没有祖先元素是已定位的，则相对于文档的 body 元素。注意：当相对定位的元素发生偏移后，原先在这个元素下面的其他元素会被覆盖，但是从文档流的角度，相对定位的元素仍然在原来的位置上，因此，后面的元素不会根据它进行布局。当元素在滚动到特定位置时，它将根据设置的 "top", "right", "bottom", "left" 值进行定位，直到滚动到另一个设定的位置，然后保持其位置不变。
从头学前端-32：定位（position属性详解）
一碗周
12-07 2559
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第三十二篇-《定位》 本系列文章在掘金首发，编写不易转载请获得允许 本篇文章将来学习CSS中的定位，本篇文章的内容大纲如下： 概述 CSS中的定位的实现是通过position属性实现的，关于定位的名词有如下几个： 定位元素：position属性为relative，absolute，fixed或sticky的元素 相对定位元素：position属性为relative的元素.
web前端练习3----css的position属性理解
翟浩浩Android专栏
11-21 399
position: relative; 相对定位元素的定位是相对其正常位置。 position: absolute; 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于: 结合下面的例子解释： 父元素box中， 必须设置 position: relative; 相对定位； 子元素icon1中， position: absolute; 绝对定位； 子元素i...
position(五种属性，以及每个属性的特点)
热门推荐
Delicia_Lani的博客
10-28 1万+
1. position: relative;相对定位 1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性） 2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置） 3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移） 4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越...
CSS属性 Position的几种定位方式
WangMin@汪末末
09-18 4913
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 在讲几种定位方式之前，我们先来了解一下什么是普通流(normal flow)？ 除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。 position 属性的作用 position 用于定位盒子对象，有时一个布局中几个小对象，不易用css paddin
position的属性
zuo_zuo_blog的博客
04-06 1万+
1.position: relative;相对定位 不影响元素本身特性，不会使元素脱离文档流，没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）， 提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。） （两个都为定位元素，后面的会覆盖前面的定位） 2.position: absolute 绝对定位 使元素完全脱离文档流（在...
Web前端基础（九）：CSS的position属性与其他
JesyWu的博客
03-29 704
一、margin负值的使用方法 在margin-bottom: -1px; border-bottom: 1px solid black; 然后在包含的这个块中写——overflow: hidden; 二、position定位、z-index position：static（默认）\inherit（继承）\fixed（相对于窗口定位）\relative（相对定位）\absolute（绝对定位） position：fixed; 设置：top: ; bottom: ; left: ;
前端position方法总结
xinqing0909的博客
04-10 1943
position为absolute时不占空间，因此会出现覆盖的情况，父套子应该为需要调整的div为父，在其内再增加div为子，则和其他元素位置不变，可实现z-index 1、position:static无定位 该属性值是所有元素定位的默认情况，在一般情况下，不需要特别声明，但遇到继承情况，不愿意见到元素所继承的属性影响本身，可使用该方法取消继承，即还原元素定位的默认值 2、p...
前端---HTML中position用法
Nagile-zhou博客
09-24 6705
html页面布局中布局方法(position)分为相对布局(relative)和绝对布局(absolute)   position的五个属性值： static   inherit fixed relative absolute 我们再以次介绍各个属性值的作用以及会产生的效果:  1.static   static属性为默认值,没有定位，元素出现在正常的流中（忽略 top, bot...
浅谈position属性
一个前端小白的瞎扯
04-24 5533
position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute。position:static    static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中。因此这种定位就不会受到top、bottom、left、right的影响。&lt;div class="wrap"&gt;     &lt;div class="content"...
CSS 修改鼠标图标样式
最新发布
JiuYux的博客
06-18 273
自定义的鼠标图标，推荐使用ico或cur格式，png也可以。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值