CSS常用定位(position)总结

最新推荐文章于 2024-06-19 20:34:05 发布
最新推荐文章于 2024-06-19 20:34:05 发布
阅读量144 收藏
点赞数 1
分类专栏： CSS 文章标签： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36620767/article/details/83033722
版权

1、static

默认的定位方式, 在不同的分辨率下，采用流式定位自己寻找合适的定位，取得相对较好的布局效果。

2、relative

相对定位, 利用top,bottom,left,right, 在原来的位置进行移动,但是扔占据着原来位置的空间!

3、absolute

绝对定位, 利用top,bottom,left,right,  以外的第一个父元素进行定位!

4、fixed

固定定位,利用top,bottom,left,right, 以浏览器的窗口进行定位, 一般也可以理解以body 为父元素进行定位!

5、inherit

继承父元素的position 的值, 继承父元素的定位方式!

AbandonU
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css清除定位影响,总结CSS的position定位属性在使用的一些重点
weixin_29437633的博客
08-04 2522
关于CSS定位，有人很多时候都是随便用用，符合自己的要求就行。但是CSS中的position等属性确实有很多需要认真考究的地方。1.position:staticstatic属性是position的默认值，也就是说，当一个元素没有为其设定position属性时，它的默认值就是static。2.position:absolute这是一个经常会被用到的position属性值。如果为某个元素设定了abs...
CSS常用标签 — 定位
weixin_67614925的博客
05-11 1055
文章目录绝对定位相对定位固定定位粘性定位层叠元素过渡 绝对定位 绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。 <head> <style> * { margin: 0; padding:
css定位属性position:fixed
wangooo的博客
01-02 3041
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
CSS——CSS定位※ ( position )
流楚丶格念的博客
07-03 4466
文章目录定位(position)为什么要用定位？元素的定位属性静态定位(static)相对定位relative(自恋型)绝对定位absolute (拼爹型)1.父级没有定位2.父级有定位3.子绝父相 ※※绝对定位的盒子水平/垂直居中代码示例固定定位fixed(认死理型)叠放次序（z-index）四种定位总结定位模式转换顺丰案例 定位(position) background-position 背景定位 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。 PS: 定
CSS - 定位布局（position）
伏城之外的博客
07-20 2114
浮动布局的不足、定位模式和边偏移、静态定位、相对定位、z-index、层叠上下文、Stacking Context、包含块、Containing block、绝对定位、子绝父相、水平垂直居中、margin:auto、固定定位、版心右侧、视觉视口、布局视口、连续媒体、分页媒体、粘性定位、滚动机制............
CSS中定位元素position的常用属性的用法
weixin_43642752的博客
06-10 759
position常用的元素主要有相对定位:relative、绝对定位:absolute、浏览器窗口定位:fixed 容器设置定位类型为窗口定位后，容器会始终存在于设置的位置，不受窗口下滑放大缩小等影响。 将子容器通过绝对定位到父容器的右上角（左边距为0，上边距为0） 通过绝对定位可设置子容器相对父容器居中...
html消除绝对定位的影响,css定位常用属性 CSS清除定位position
weixin_35304632的博客
06-03 1436
css中定位position有哪几个属性值？absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位； 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定； fixed，生成绝对定位的元素，相对于浏览器窗口进行定位； 元素的位置通过 "left", "top",absolute 生成绝对定位的元素，相对于 stati...
前端基础：CSS的定位position（开发常用）
weixin_49555741的博客
03-21 1305
使用场景： 盒子固定在屏幕的某个位置、 盒子自由移动位置 压住其他的盒子
css定位（position）
Lik_ruirui的博客
06-19 717
如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元 素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。其实就是标准流的特性。换句话说：如果要对一个子元素使用定 位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
CSS常用样式属性总结
一杯清泉
02-21 4386
1、左浮动 float:left 2、右浮动 float：rigth 3、div内的元素不换号 white-space: nowrap; display: inline-block; 4、消除padding对宽高影响 box-sizing: border-box; 5、a标签图片太大，尺寸超过容器大小 background-size: contain; 6、网页跳转打开新的页面 target: "_blank"; 7、宽高充满父布局 width: 100%; heigth:100%; 8、转为块级元素 di
深究CSS定位position的常用技法
09-27
主要针对CSS定位position的常用技法进行探究，CSS中的position等属性确实有很多需要认真考究的地方，本文就和大家一起探索一下
CSS实现模拟position的fixed页面定位效果
09-25
在网页设计中，`position: fixed` 是一种常用的CSS定位方式，它可以将元素固定在视口的某个位置，即使页面滚动，该元素也会保持在屏幕的特定位置。然而，有些老旧的浏览器或特殊环境下可能不支持 `position: fixed`...
利用CSS定位背景图片的常用方法总结
09-24
其次，CSS3中的`background-position`扩展语法提供了一种更灵活的方式来定位背景图片。我们可以指定背景图片相对于元素的任意角落的偏移量。例如，将图片定位在元素右下角5px的位置，可以这样写： ```css .keith { ...
CSS常用样式简单的总结包括定位、显示等属性
12-13
- `position`属性决定了元素的定位方式，主要有三种值：`static`、`relative`和`absolute`。`static`是默认值，元素按正常的文档流排列；`relative`使元素相对于其正常位置偏移，不影响其他元素的位置；`absolute`...
mpu6050陀螺仪使用方法开发教程文档.docx
07-30
mpu6050陀螺仪使用方法
【SCI顶级】龙格库塔算法RUN-CNN-LSTM-Multihead-Attention温度预测【含源码 5747期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
大模型的数学之魂：统计学习理论精要
07-30
大型机器学习模型，通常简称为“大模型”，是指具有数十亿甚至数千亿参数的深度神经网络模型。这些模型因为其庞大的参数量和复杂的计算结构，能够处理非常复杂的任务和数据，展现出强大的表达能力和预测性能。大模型在自然语言处理、计算机视觉、语音识别和推荐系统等多个领域都有广泛的应用。 大模型的设计目的是通过训练海量数据来学习复杂的模式和特征，从而具备强大的泛化能力，能够对未见过的数据做出准确的预测。与参数较少、层数较浅的小模型相比，大模型虽然需要更多的计算资源和时间来训练和推理，但它们展现出了一种被称为“涌现能力”的特性，即从原始训练数据中自动学习并发现新的、更高层次的特征和模式。 大模型的发展历程可以分为几个阶段，从早期的卷积神经网络模型发展到以Transformer为代表的全新神经网络模型，再到当前以GPT为代表的预训练大模型阶段。Transformer架构因其自注意力机制而成为大模型的核心技术，它使得模型能够更好地理解和处理文本数据中的长距离依赖关系。 大模型的分类主要包括语言大模型（NLP）、视觉大模型（CV）和多模态大模型。语言大模型专注于处理文本数据和理解自然语言，而视觉大模型用
唯美淡雅四页.zip
最新发布
07-30
【简历模板】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
仿真验证阵列可以提高接收信号信噪比
07-30
这是一份模拟了阵列输入信号及噪声，并验证了相对于阵列接收到的信号，阵列输出信号可以将信噪比提高M倍，其中M为阵列的阵元个数的代码。 代码中可以随意修改阵元个数、阵元间距、波束指向角度、信号频率等。 代码中关键部分均含有文字注释，完全不必担心看不懂。 无论是从仿真波形，还是计算的信噪比结果均能看出阵元数为M的阵列将信号的信噪比提高了M倍。
HTML/CSS基础与进阶知识总结
`position`属性用于定位，常见的定位方式有静态、相对、绝对和固定，绝对定位相对于最近的非static祖先元素定位，相对定位则相对于元素本身。 HTML5引入了新的语义化标签，如`<article>`、`<section>`等，增强了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值