CSS定位之固定定位

最新推荐文章于 2022-11-23 17:28:33 发布
最新推荐文章于 2022-11-23 17:28:33 发布
阅读量385 收藏
点赞数
分类专栏： HTML&&CSS 文章标签： CSS fixed position
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/november_chopin/article/details/75738641
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定定位</title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				
				/*
				 * 当position元素为fixed时，开启了固定定位
				 * 固定定位也是一种绝对定位，大部分特点和绝对定位一样，
				 * 不同的是
				 * 			固定定位永远都会相对于浏览器窗口定位的
				 * 			固定定位会固定在窗口的某一个位置，不会随窗口的移动而移动
				 */
				position: fixed;
				left: 0px;
				top: 0px;
				
			}
			.box3{
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
				
				
			}
		</style>
	</head>
	<body style="height: 5000px;">
		
		<div class="box1"></div>
		<div class="box4" style="height: 200px;width: 200px; background-color: olive; position: relative;">
			<div class="box2"></div>
		</div>
		
		<div class="box3"></div>
	</body>
</html>

效果：


jsfantasy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
固定定位 fixed
m0_56047670的博客
01-03 784
前端固定定位
固定定位（html+css)
qq_46127986的博客
01-21 446
固定定位实现左右广告 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .top { width: 100%; height: 44px; margin:
CSS固定定位
qq2071114140的博客
05-24 2177
固定定位（绝对定位的一种） position:fixed 一.固定定位是相对于哪里定位？（坐标原点在哪） 固定定位有两个地方是固定的 1.坐标原点固定，始终相对于浏览器窗口定位。 2.位置固定，移动滚动条时，固定定位的元素位置仍然不变。（参考一些页面旁边的小广告） ...
css固定定位的代码,CSS——相对定位、绝对定位、固定定位(示例代码)
weixin_30460749的博客
08-04 4285
相对定位：position:relative当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流，除非设置其z-index值为负值。并且我们发现当相对定位元素进行位移后，表面来看已经脱离了文本流，但是实际上在本文流中还为原来的相对对定位留下了原有的总宽与总高。绝对定位：position:absolute相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局...
css固定定位的代码,css如何实现固定定位？（代码实例）
weixin_42551967的博客
08-04 594
本章用实例给大家介绍css如何实现固定定位，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。把box2设为固定定位：定位.box1{width:100px;height: 100px;background-color: rgb(184, 208, 162);}.box2{width:100px;height: 100px;background-color: rgb(231, 223,...
固定定位
weixin_43339334的博客
06-03 344
固定定位： - 将元素的position属性设置为fixed则开启了元素的固定定位 - 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样 唯一不同的是固定定位永远参照于浏览器的视口进行定位 固定定位的元素不会随网页的滚动条滚动 ...
## 绝对定位模拟固定定位的代码和原理
weixin_43073298的博客
06-11 442
绝对定位模拟固定定位的代码和原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body,html{ overflow: hidden; height: 100%;
119-html定位CSS权重
Lich Howger
12-09 459
定位 文档流 文档流是指盒子按照html标签编写的顺序从上到下 每个盒子占据自己的位置 我们可以使用css的position 1.relative 相对定位 2.absolute 绝对定位 3.fixed 固定定位 来写个弹窗 &lt;div class="pop"&gt; &lt;h3&gt;弹窗标题&lt;/h3&gt; &lt;p&gt;弹窗内容&lt;/p&g...
定位（静态定位、绝对定位、相对定位、固定定位）
qq_45929209的博客
12-01 1792
定位静态定位绝对定位相对定位固定定位 静态定位 缺省时，即为静态定位 静态定位是指各个元素在html文档流中应有的位置，根据HTML超文本传输协议，浏览器在接受和解析网页时，是遵循从上往下来显示的 静态定位时，无法通过left、right、top、bottom来设定元素的位置 绝对定位 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>&lt
html中的固定定位的用法
最新发布
小魏快起床的博客
11-23 5403
在上一篇博客中html中的定位知识点如何使用_小魏快起床的博客-CSDN博客给大家主要分享了html中的绝对定位和相对定位的用法，那么里面提到了一个固定定位，这个总该解释解释吧，咱们也是一个有始有终的开发者。固定定位用 position: fixed;然后用方向词进行偏移，然后就固定起来啦！！！
CSS 固定定位 position fixed
cvper's world !
01-28 6万+
简单描述：固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；                 注意：固定定位的位置是  相对当前浏览器窗口  的； 代码示例： 1.我们先在页面中输出一个标准情况下的 div 元素，不添加定位；  代码： *{margin:0;
html固定位置代码,css如何实现固定定位？（代码实例）
weixin_36364707的博客
06-07 1430
本章用实例给大家介绍css如何实现固定定位，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。把box2设为固定定位：定位.box1{width:100px;height: 100px;background-color: rgb(184, 208, 162);}.box2{width:100px;height: 100px;background-color: rgb(231, 223,...
移动端重构系列3——整体布局
StarsInSun的专栏
07-23 769
移动端和pc端一样整体上布局也可以分为上中下三部分，如图： 一般来说,header和footer部分都为fixed定位，中间的内容区域可滚动。 fixed布局 常规的结构如下： ... 因为移动端单页面特性，所以每个page为一个页面，然后整体使用wrap-page包裹。考虑到可滚动的为page内容，所以我们得给wrap-page一个具体的高
移动端CSS底部固定和fixed定位在ios上的bug
banqiaoxian4609的博客
06-05 1648
fixed定位在ios上的bug css三栏布局 假设我们页面的 HTML 结构是这样： <div class="wrapper"> <div class="content"><!-- 页面主体内容区域 --></div> <div class="footer"><!-- 需要做到 Sticky Fo...
CSS定位
zzyhhh的博客
07-08 288
A：相对定位（position: relative）：如果对某一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直（或水平)位置（top,right,bottom,left四值），让这个元素"相对于"它的起点进行移动。注：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留； [2]  B：绝对定位(position: absolu...
踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案
hello world.
03-11 4万+
1.-webkit-overflow-scroll:touch; 2.使用其他布局方式
小技巧css解决移动端ios不兼容position:fixed属性，无需插件
热门推荐
小白努力走
10-15 15万+
ios运用position:fixed会错位，css一行样式巧妙解决定位问题。
css中的固定定位例子超详细！！！
fighting_dream的博客
01-25 945
固定定位是什么呢？ 固定定位是元素固定于浏览器可视区的位置。主要作用是可以在浏览器页面滚动时元素的位置也不会改变。 语法： { position:fixed; } 例子举起来~ 还没加固定定位的html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
ios fixed定位后内容不显示_css布局--定位（完整版）
weixin_39647412的博客
11-27 744
定义：定位就是将指定元素摆放到页面的任意位置，通过定位可以任意摆放元素。 通过position属性来设置元素的定位 可选值： * static：默认值，元素没有开启定位 * relative：开启元素的相对定位 * absolute：开启元素的绝对定位 * fixed：开启元素的固定定位（也是绝对定位的一种）当开启了元素的定位（position的属性值是一个非stat...
CSS定位详解：浮动、绝对与固定布局深入解析
本文档详细讲解了三种基本的CSS定位机制：普通流、浮动和绝对定位。 1. **CSS定位和浮动**：CSS提供了position属性来管理元素的位置，包括static（默认值）、relative、absolute和fixed。浮动允许元素脱离普通文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值