固定定位同时设置left和right

最新推荐文章于 2023-06-04 22:58:10 发布
最新推荐文章于 2023-06-04 22:58:10 发布
阅读量780 收藏 8
点赞数 5
分类专栏： css 文章标签： html5 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43663349/article/details/120780082
版权

今天看到别人的代码，给固定定位设置left:0;right:0,固定定位的盒子就横向撑开了，我一直只使用他们来调整位置，原来还有这种调整盒子大小的作用，自己测试了下，写下该文章记录

基础知识：

  • 首先固定定位和绝对定位都会脱标，相对定位不会脱标
  • 设置定位没有设置大小的盒子，脱标的盒子会根据自己内容撑开，相对定位的盒子撑满父元素
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

测试后的结论

  • 给固定定位和绝对定位的盒子设置left:0;right:0可以实现横
最低0.47元/天 解锁文章
划船不用桨--
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
left和right一对矛盾属性同时存在
dasong1992的博客
07-07 545
与阅读顺序有关，从左至右时，优先左边的。 优先级是对同一属性，值多次出现而存在的。 下面的设置是概念混淆。 比如 .container{position:absolute;left:50px;}div.container{right:50px;} 下面结果仍是靠左的， 转载于:https://www.cnblogs.com/fredwu/archive/2012/07/07/...
CSS绝对定位(absolute)同时设定left right,或者top bottom
一刀的博客
02-18 1120
<!DOCTYPE html> <html> <head> <title>document</title> <style> .container{ width:100px; height:100px; position:relative; } .inner-box{ background:#000;
CSS盒子的定位
lvmengmeng
04-07 2030
转自：http://www.cnblogs.com/stephen-liu74/p/3333704.html 相对定位       使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。       使用relative，即相对定位，除了将position属性设置为rel
html如何给盒子设置位置,CSS盒子定位
热门推荐
weixin_35094438的博客
06-04 1万+
又到周末了，又结束了一周的课程了，表示昨前天开始老师布置家庭作业开始写页面了，前天的还好，12点之前搞定，昨天的熬到2点，表示大神不要笑哈，毕竟能力有限，第二天看了老师的讲解，才发现做了非常多的无用功，好了，闲聊就到这里吧，下面我分享下这周老师讲到的一些内容，以下都是自己的理解哈，仅供参考：CSS盒子定位：什么是盒子定位呢，顾名思义，就是元素盒子(以下主要以块级盒讲解)在页面中的位置，定位就是确定...
11. 前端基础--CSS盒子定位
weixin_45267102的博客
10-31 3329
文章目录前端基础--CSS盒子定位1. 再看CSS 布局的三种机制2. 为什么使用定位？3. 定位详解3.1 边偏移3.2 定位模式 (position)静态定位(static) —了解相对定位(relative)—重要绝对定位(absolute) —重要定位口诀—子绝父相固定定位(fixed) - 重要4. 定位(position)的案例4.1 仿新浪头部和广告5. 定位(position)的扩展5.1 绝对定位的盒子居中5.2 盒子居中定位示意图5.3 堆叠顺序（z-index）☆5.4 定位改变di
css position 设置元素的定位方式详解
12-13
2、top 、right、bottom、left属性指定定位元素的位置。 3、Z-index 设置定位元素的叠层顺序，也就是在z轴的位置，值可以为正负数，值越大离用户越近（也就是显示的层次越往上），值越小离用户远。  如图：z-index...
CSS3定位和浮动详解
12-13
position 把元素放在一个静态的，相对的，绝对的，或者固定的位置中 top/left/right/botom 元素向上/左/右/下的偏移量 overflow 设置元素溢出其区域发生的事情 clip 设置元素显示的形状 vertical-align 设置元素显示...
CSS的position定位和float浮动详解
09-27
其值有`left`、`right`和`none`。 1. `left`：元素向左浮动，其他非浮动元素会围绕它排列。 2. `right`：元素向右浮动，同样，其他非浮动元素会围绕它排列。 3. `none`：元素不浮动，保持默认的布局行为。 `float`...
CSS中将Span标签设置为固定宽度的方法
09-25
总之，通过CSS的`display`、`width`、`text-align`和`float`属性，我们可以灵活地将`<span>`标签设置为固定宽度，并根据实际布局需求选择合适的方法。在处理不同浏览器的兼容性问题时，可能需要额外的CSS hack或使用...
理解相对定位和绝对定位
L_Vincent的专栏
06-09 426
相对定位和绝对定位定位标签：position包含属性：relative（相对） absolute（绝对）1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）
top,right,bottom,left设置为0有什么用？
m0_37158404的博客
12-29 4727
left等定位属性，要使用时，它必需是已定位的元素。（absolute，relative，fixed） 　　eg：img{position:absolute;left:100px} 如果去掉position：absolute，则left失效。对float：left这种浮动元素也是失效，反正就是定位了才让用哈。 拓展一种居中用法， （1）先定位，设置 top:0;bottom:0;margin:...
CSS的简单学习（6）
wqksoul的博客
11-28 386
实训
CSS定位简介
Huang_WeiHong的博客
07-19 715
CSS定位描述 相对定位 概念 让元素相对于自己原来的位置，进行位置调整，除了可以修改它的最终位置，可以与页面上的其他元素重叠 position: relative;<!-- 相对定位 --> top，bottom，left和right来精确指定要将定位元素移动到的位置，注意：top是从上往下移动，left是从左往右移动，这些属性值可以采用逻辑上期望的任何单位——px，mm，%等 特点 相对定位不脱离标准文档流 相对定位后的"盒子"相当于本体一个"影子"，可以在任何地方，但是本体还是位于标准文
top:0,bottom:0,left:0,right:0实现黑色遮罩
Youthenen的博客
09-25 688
当我们在做弹窗或者loading时，得让页面其他内容是不能点击的，这就是遮罩。 让无宽高的盒子填满父容器，从而实现遮罩： 设置top:0，left:0，right:0，bottom:0是让子盒子四边与父容器间距为0，而子盒子没有明确宽高，自然被拉伸到撑满整个父容器了。 .child { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5)
微信小程序学习笔记 flex布局2
weixin_34198453的博客
12-14 233
flex 属性加上之后 padding 依然会撑大盒子,使用 box-sizing: border-box 可以不改变原来盒子的大小 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" co
【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
weixin_30681615的博客
05-06 213
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框，每个框由元素的内容，内边距，边框和外边距组成。 2.如果在元素上添加背景，则背景是边框, 内边距和内容组成的区域. 3.在css中width和height指的是内容区域的宽度和高度。增加内边距，边框和外边距不会影响内容区...
position:absolute 按钮左右分布：left:0 和 right:0 以及雪碧图
weixin_30709929的博客
07-12 593
问题：把两个a标签按钮 垂直居中，并且分别把两个按钮放在水平左右两边顶部1，祖父元素设定：position:relative2，把.arrow 设定上下垂直居中 position:absolute; top:50%; margin-top:-20px;3，因为父级元素已经进行垂直居中定位，所以，只要把 a 标签进行左右定位即可　　　a标签公共样式.item{ position:absolute...
CSS属性详解——position:fixed
最新发布
Wod_7的博客
06-04 8997
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
关于fixed定位的问题，解决元素左右偏移问题
m0_62217360的博客
11-05 1127
关于fixed定位的问题，解决元素左右偏移问题
表示固定定位的单词
05-30
固定定位的元素可以使用 `top`、`right`、`bottom` 和 `left` 属性来指定元素的位置，例如： ```css #fixed-element { position: fixed; top: 0; right: 0; } ``` 在上述代码中，`#fixed-element` 表示一个固定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值