固定定位fixed

最新推荐文章于 2024-03-09 16:15:33 发布
最新推荐文章于 2024-03-09 16:15:33 发布
阅读量379 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/o0__0/article/details/53674356
版权

这样一个页面，要实现上面导航条和左边列表一直在固定位置

1.使用position: fixed; 将导航和列表固定，变成了下面这样


2.然后使用z-index:1,来设置层叠顺序，这样就使导航和列表固定在自己的位置不会随着页面向下拉而消失了



o0__0
关注
定位：relative相对定位、absolute绝对定位、fixed固定定位
m0_64460142的博客
04-08 4718
作者有话说:在学定位之前有了解过吗？再没学浮动之前，这些块元素标签会出现在一列，要想实现并排就可以使用浮动float，现在我们可以学习定位，给背景图片或者图片、div、border等添加属性等，有定位在祖先级的、定位在浏览器的，比如说浏览京东页面时，当你拉动网页的时候页面会动，但是会有一个栏目始终保持在那个位置不动，这就是使用的定位，接下来一起看看吧！ 定位使用position static 默认值，没有定位 relative 相对定位 ...
固定定位 fixed
m0_56047670的博客
01-03 819
前端固定定位
fixed固定定位
lzl_Avery的博客
03-30 758
div{width: 200px;height: 50px;background: coral; position: fixed;bottom: 50;}     固定定位  jkkkkkkkkkkkkkkk  jkkkkkkkkkkkkkkk  jkkkkkkkkkkkkkkk  jkkkkkkkkkkkkkkk  jkkkkkkkkkkkkkkk
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
qq_44939011的博客
07-20 1万+
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
固定浮动定位(fixed)实现思路及代码
12-13
在网页设计中，固定定位（position:fixed）是一种常见的布局技术，它允许元素相对于浏览器窗口进行定位，即使在滚动页面时也会保持其位置不变。在本案例中，我们需要在页面底部中间固定一个区块，通常会使用`...
CSS之定位：边偏移 静态定位static 相对定位 relative 绝对定位 absolute 固定定位 fixed 粘性定位sticky，子绝父相的由来,绝对定位的盒子居中, 堆叠顺序
qq_44156869的博客
02-18 1753
为什么需要定位？ 某一个盒子可以自由的在一个盒子内移动位置，并且压住其他盒子。 当我们滚动窗口的时候，盒子的是固定屏幕的某个位置的。 为什么需要定位 以上效果，标准流或者浮动都无法实现，此时需要定位来实现。 所以： 浮动可以让多个盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 定位组成： 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位 = 定位模式 +边偏移。 定位模式
跨浏览器的实践:position:fixed 层的固定定位
10-30
在网页设计中，实现元素的固定定位（Fixed Positioning）是一项常见的需求，它可以使元素相对于浏览器窗口保持固定的位置，无论用户滚动页面如何，该元素总是在屏幕的特定位置。`position: fixed` 是 CSS 中的一个...
如何解决IOS 下固定定位fixed 失效问题？
04-26 1511
如何解决IOS 下固定定位fixed 失效问题？ 相信大家在做移动端项目时都会遇到fixed失效的问题，在这里我们说的是在ios 下 ，头部底部都采用固定定位时，滑动中心部分时整个页面都跟着滚动也就是说固定定位失效了。那么如何解决这个问题呢？这里有个小诀窍分享给大家。 <body> <!-- fixed定位的头部 --> <div class="hea...
CSS学习21：fixed（固定定位）
玉安_ZhangDe的博客
04-09 3万+
固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。 语法： 选择器 { position: fixed; } 固定定位的特点：（务必记住）： 1.以浏览器的可视窗口为参照点移动元素。 跟父元素没有任何关系 不随滚动条滚动。 2.固定定位不在占有原先的位置。 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型） 完全脱标—..
No.11 position定位 之 fixed固定定位
lzh131464的博客
12-30 4777
在css中，使用position（定位），它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素、甚至是浏览器窗口本身的位置。 本篇介绍： fixed（固定定位） fixed定位元素相对于浏览器窗口进行偏移，即定位基点是浏览器窗口。不管窗口如何滚动，它的位置始终不变。 fixed搭配定位偏移量top、bottom、left、right一起使用，改变固定定位元素的初始位置，否则初始位置就是该元素在文档中的默认位置。 格式语法： css选择器 {position：fixed;
position:fixed 固定定位
热门推荐
asdfgv2022的博客
08-03 5万+
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...
css 绝对定位(absolute)和固定定位(fixed)
css教程
03-17 2167
CSS样式中的postion元素，它有四个不同的属性，即static | absolute | fixed | relative。   static :默认值。无特殊定位，对象遵循HTML定位规则  absolute :绝对的。将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在
css：position / static默认属性 / fixed固定定位 / relative相对定位 / absolute绝对定位 / sticky粘性定位
最新发布
snowball的博客
03-09 1658
这意味着它将按照在HTML代码中出现的顺序进行显示，并且不会受到其他定位属性（如top、right、bottom或left）的影响。绝对定位，元素的位置相对于其最近的已经定位的父元素，如果最近的父元素没有定位则相对于文档进行定位。2、可以使用top、right、bottom和left属性来定义相对于元素原始位置的偏移量。3、当使用相对定位时，元素不会对其他相对定位或绝对定位的元素产生影响。的元素是文档流的一部分，忽略其他定位属性，如top、right、bottom或left。
定位的参照物
weixin_58734251的博客
10-11 431
相对定位： 相对定位是参照于元素在文档流中的位置进行定位的，既元素原本在的位置 绝对定位： 绝对定位是参照于离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则参照浏览器的视口 固定定位： 固定定位永远参照于浏览器的视口进行定位 粘滞定位（很少使用，因为IE浏览器不兼容）： 粘滞定位参照浏览器的视口进行定位 ...
absolute如果找不到定位父元素那么会相对于谁进行定位_position 定位
weixin_39861054的博客
11-24 496
position 属性规定元素的定位类型。position 有四个属性值：static（默认值）、relative（相对定位）、absolute和fixed（统称为绝对定位）。static，没有定位，元素出现在正常的流中（忽略 top、bottom、left、right 或者是 z-index 声明）。relative，生成相对定位的元素，相对于原来位置移动，元素设置属性之后会出在文档流中不影响其...
给tablayout的文字设置边框，同时文字与边框之间设置间距
05-24
要给TabLayout的文字设置边框，并且文字与边框之间设置间距，可以通过自定义TabLayout的布局实现。 首先，在布局文件中，定义一个新的TextView样式，包含文字边框和间距： ```xml <style name="TabTextStyle"> <item name="android:textSize">16sp</item> <item name="android:textColor">@color/black</item> <item name="android:paddingStart">12dp</item> <item name="android:paddingEnd">12dp</item> <item name="android:paddingTop">8dp</item> <item name="android:paddingBottom">8dp</item> <item name="android:background">@drawable/tab_border</item> </style> ``` 其中，@drawable/tab_border是一个Drawable文件，用来定义边框样式。例如： ```xml <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/white" /> <stroke android:width="1dp" android:color="@color/black" /> <corners android:radius="20dp" /> </shape> ``` 接下来，在TabLayout中使用这个TextView样式： ```xml <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill"> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab 1" android:layout="@layout/tab_text_layout" /> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab 2" android:layout="@layout/tab_text_layout" /> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab 3" android:layout="@layout/tab_text_layout" /> </com.google.android.material.tabs.TabLayout> ``` 注意，这里的布局文件使用了自定义的tab_text_layout布局，用来显示带有边框和间距的TextView： ```xml <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" style="@style/TabTextStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" /> ``` 这样就可以给TabLayout的文字设置边框，并且文字与边框之间设置间距了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值