关于固定定位position:fixed最简单、最直白的应用

最新推荐文章于 2024-05-21 11:36:23 发布
最新推荐文章于 2024-05-21 11:36:23 发布
阅读量5.4k 收藏 5
点赞数 1
分类专栏： css 文章标签： html css 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangitso/article/details/103676898
版权

关于固定定位position:fixed最简单、最直白的应用

position:fixed是啥？有啥用

position:fixed是固定定位的意思，就是把一个DIV（footer）固定在页面的最底部，无论页面上面的内容如何滚动，页面下部的（footer）不动。
要实现这个功能的时候百度了好多，但是也没看明白，把教程的代码拿过来仔细研究尝试才知道了，原来是这样，下面把代码贴出来，供自己和大家想用的时候来取吧！

	<title></title>
	<style>
		.wrap{
			width: 15rem;
			background: #fff;
		}
		.item{
			width: 100%;
			height: 4rem;
			background: #ff0;
			margin-bottom: 0.4rem;
		}
		.btn{
			width: 100%;
			height: 2rem;
			text-align: center;
			background: #f00;
			font-size: 1.8rem;
		}
		
		
		.posir{ position: relative;}/* 加在父级 */
		
		.posif{ position: fixed;}/* 加在子级 */
		
		.overf{overflow: auto;}/* 加在父级 */
		
		.bottom{ bottom: 0;}/* 加在子级 */
		
	</style>
</head>
<body>
	<div class="wrap posir overf">
		<div class="item"></div>
		<div class="item"
最低0.47元/天 解锁文章
wangitso
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
跨浏览器的实践:position:fixed 层的固定定位
10-30
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之
position中的四种定位方式
weixin_54721820的博客
12-20 1325
position是CSS中比较重要的一个属性，常用于页面布局，它的值有4个： static：默认文档流 relative: 相对定位，相对于自身位置 absolute：绝对定位，相对于非static父元素进行定位，脱离文档流 fixed：固定定位，脱离文档流
vue底部分页利用position: fixed固定，切换时闪动问题
最新发布
likexiziname的博客
05-21 531
vue底部分页利用position: fixed固定，切换时闪动问题
position:fixed 固定定位
热门推荐
asdfgv2022的博客
08-03 5万+
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...
css定位属性position:fixed
wangooo的博客
01-02 3127
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
CSS属性详解——position:fixed
Wod_7的博客
06-04 1万+
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
CSS定位布局详解
大河之犬的博客
10-03 6989
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。
html中fixed属性,CSSposition属性中：fixed使用详解
m0_70664757的博客
01-16 3500
是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。fixed固定定位和absolute绝对定位比较类似，它们都能够让元素产生位移，并且脱离文档流。/*设置元素为固定定位*/
position:fixed;
m0_37972548的博客
12-26 4万+
为什么设置position：fixed；div会消失。 此文如有不正确的地方，敬请留言指出，谢谢。 1.position:fixed;作用 生成绝对定位的元素，相对于浏览器窗口进行定位。可以通过设置 "left", "top", "right" 以及 "bottom" 属性给目标元素定位。 例如：将id = content 的div固定在窗口底部，距离窗口左边距离200px。滚动条上下滚动
CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题
01-20
在示例代码中，若只有`position: fixed`而没有边位移，浏览器会默认将元素放在其在`static`定位下的原始位置，这实际上与期望的固定定位效果相悖。由于没有明确的偏移值，元素可能会覆盖其他内容或者出现在不可预期...
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案 iOS 中 position:fixed 吸底时的滑动出现抖动是前端开发中常见的问题之一。这个问题的出现主要是由于 native 和 h5 两个原因引起的抖动。native 的抖动是...
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
IE6浏览器不支持固定定位（position：fixed）解决方案
12-13
今天在学习的时候，突然发现在IE6浏览器下，position：fixed不管用了： 复制代码代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <...
position：fixed固定定位的用法
demin3278的博客
01-03 6408
一、position：fixed；固定定位 　　1.实现某个元素在可视窗口的居中位置显示 　　　　1）给自身设置宽高； 　　　　2）给自身加position：fixed； 　　　　3）用margin向左移动自身宽度的一半，向上移动自身高度的一半； 　　或： 　　　　1）给自身设置宽高； 　　　　2）再设置position：fixed； 　　　　3）再给自身设置left：0...
position:fixed
tiger.passion
02-19 202
Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。 position:static　无定位 该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以...
position:fixed实现相对于父级定位
callmeCassie的博客
10-26 1万+
position:fixed
No.11 position定位 之 fixed固定定位
lzh131464的博客
12-30 4716
在css中，使用position（定位），它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素、甚至是浏览器窗口本身的位置。 本篇介绍： fixed（固定定位） fixed定位元素相对于浏览器窗口进行偏移，即定位基点是浏览器窗口。不管窗口如何滚动，它的位置始终不变。 fixed搭配定位偏移量top、bottom、left、right一起使用，改变固定定位元素的初始位置，否则初始位置就是该元素在文档中的默认位置。 格式语法： css选择器 {position：fixed;
解决position: fixed；遮挡其他邻近模块内容的问题
qq_44748860的博客
08-29 1967
由于位置属性值fixed的设置，导致底部button部分在文档流中不占据文档流位置，所以导致底部内容被遮挡，无法正常展示。top、margin-top的区别：（此处参考其他作者，链接：https://juejin.cn/post/6986935474635931656）因为fixed元素脱离了正常文档流，所以relative元素的原本位置向上提了，产生了覆盖的行为。来使得脱离文档流的内容在文档中占据正常的文档流空间，因此fixed属性值覆盖问题得以解决！方法一：给内容设置margin-top，
position: fixed定位失效原因及解决方案
surui0419的博客
11-28 6377
position: fixed问题分析
position:fixed 固定顶部
04-22
position:fixed是CSS中的一个定位属性，用于将元素固定在页面的某个位置，不随页面滚动而改变位置。当设置position:fixed时，元素的位置会相对于浏览器窗口进行定位。 固定顶部是指将元素固定在页面的顶部位置，无论用户如何滚动页面，该元素都会保持在页面顶部不动。 要实现固定顶部效果，可以通过以下步骤： 1. 首先，给需要固定的元素添加一个CSS样式，设置position为fixed。 2. 设置top属性为0，表示将元素固定在页面的顶部位置。 3. 可以通过设置left、right和width属性来控制元素的水平位置和宽度。 下面是一个示例代码： ``` <style> .fixed-top { position: fixed; top: 0; left: 0; width: 100%; background-color: #f5f5f5; padding: 10px; } </style> <div class="fixed-top"> 这是一个固定在顶部的元素 </div> ``` 这样设置后，该元素就会固定在页面的顶部位置，并且不会随页面滚动而改变位置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值