css中postion的fixed的用法

最新推荐文章于 2023-06-04 22:58:10 发布
最新推荐文章于 2023-06-04 22:58:10 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lb228988/article/details/21451509
版权

CSS中position属性有4种可选值:static,relative,absolute,fixed,用于定位html元素的位置，并影响元素块生成的方式。这里向大家描述一下position:fixed 的使用，此属性元素的定位方式同absolute类似，但它的包含块是视区本身。

先看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
	body{
	width:100%;
	height:1350px;
	margin:0;
	}
	.heade input{
	background-color:#FFFFFF;
		width:700px;
		height:30px;
		font-size:24px;
		position:fixed;
		left:300px;
		
	}
	.heade span{
	font-family:"宋体";
	font-size:24px;
	color:#0033FF;
	position:fixed;
	left:1010px;
	
	}
	
</style>
</head>
<body>
	<div class="heade">
		<input type="text"/>
		<span class="span">搜索</span>
	</div>
	
</body>
</html>你只需要把指定的div设置成fixed就可以实现浮动的效果，方便有快捷！

LB228988
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
position:fixed 固定定位
asdfgv2022的博客
08-03 5万+
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...
CSS属性详解——position:fixed
Wod_7的博客
06-04 7726
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
position：fixed固定定位的用法
demin3278的博客
01-03 6327
一、position：fixed；固定定位 　　1.实现某个元素在可视窗口的居中位置显示 　　　　1）给自身设置宽高； 　　　　2）给自身加position：fixed； 　　　　3）用margin向左移动自身宽度的一半，向上移动自身高度的一半； 　　或： 　　　　1）给自身设置宽高； 　　　　2）再设置position：fixed； 　　　　3）再给自身设置left：0...
关于CSS中position属性和overflow属性的使用小结
学无止步的博客
08-18 3089
关于CSS中position属性和overflow属性的使用小结 position属性 用于设置某个元素的位置类型。取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。 2、position: relative relativ
CSS定位position总结（超详细哦！）
weixin_52625590的博客
08-01 2万+
开始学习css页面布局时，先接触到的有 **标准流 或 浮动**，但是经过后续的学习发现有些场景很难通过标准流 或 浮动来快速实现。 例如： **场景1**： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 **场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 这个时候我们就需要学习新的布局方法了——`定位（position）`...............
css中position:fixed实现div在窗口上下左右居中
09-25
实现div居中的方法有很多，本例介绍的使用css中position:fixed来实现div的上下左右居中，下面以一个DIV 元素在浏览器窗口居中为例
使用CSS样式position:fixed水平滚动的方法
09-04
主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下
CSS使用position:sticky 实现粘性布局的方法
12-14
position: fixed; } 在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position还说了下面这三个值： /* 全局值 */ position: inherit; position: initial; position: unset; 估计大部分都没有用过position
CSS 固定定位 position fixed
热门推荐
cvper's world !
01-28 6万+
简单描述：固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；                 注意：固定定位的位置是  相对当前浏览器窗口  的； 代码示例： 1.我们先在页面中输出一个标准情况下的 div 元素，不添加定位；  代码： *{margin:0;
html中fixed属性,CSSposition属性中：fixed使用详解
m0_70664757的博客
01-16 2922
是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。fixed固定定位和absolute绝对定位比较类似，它们都能够让元素产生位移，并且脱离文档流。/*设置元素为固定定位*/
postion:fixed和margin:0 auto的使用
abc15603014457的博客
07-17 442
很多同学将顶部菜单固定，使用postion:fixed，然后使用margin:0 auto进行居中，发现margin:0 auto并不起作用。 通常，我们要让某元素居中，会这样做： #element{ margin:0 auto; } 　　 如果还想让此元素位置固定呢？一般我们会添加position:fixed，如下： #element{ po...
关于固定定位position:fixed最简单、最直白的应用
wangitso的博客
12-24 5250
关于固定定位position:fixed最简单、最直白的应用position:fixed是啥？有啥用 position:fixed是啥？有啥用 position:fixed是固定定位的意思，就是把一个DIV（footer）固定在页面的最底部，无论页面上面的内容如何滚动，页面下部的（footer）不动。 要实现这个功能的时候百度了好多，但是也没看明白，把教程的代码拿过来仔细研究尝试才知道了，原来是这...
定位的5种方式详解
weixin_43932097的博客
04-07 1333
static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响 div.static { position: static; border: 3px solid #73AD21; } fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： p.pos_fixed { position:fixed; top:30px; right
position:fixed;
m0_37972548的博客
12-26 4万+
为什么设置position：fixed；div会消失。 此文如有不正确的地方，敬请留言指出，谢谢。 1.position:fixed;作用 生成绝对定位的元素，相对于浏览器窗口进行定位。可以通过设置 "left", "top", "right" 以及 "bottom" 属性给目标元素定位。 例如：将id = content 的div固定在窗口底部，距离窗口左边距离200px。滚动条上下滚动
【剑指 Offer 】40. 最小的k个数
weixin_43958974的博客
10-07 135
题目：40. 最小的k个数 思路 大顶堆：堆顶元素就是堆中所有元素中最大的那个元素。 遍历数组： 如果堆中元素不足K个，那么就是直接添加； 当堆中元素大于等于K个时，就要将堆顶元素与遍历到的当前元素比较： 比栈顶元素大就跳过； 比栈顶元素小，那么栈就弹出栈顶元素，然后将该元素放入栈中； class Solution { public int[] getLeastNumbers(int[] arr, int k) { // 特判 if(k == 0 || k
postion-fixed元素
liu_qingyi的博客
03-02 293
脱离文档流后内容像向内缩 为了让导航栏和图片重合，使用了postion-fixed 但是使用后发现原本左右分开的布局缩到了一起 这时不是因为布局被打乱了，而是因为脱离文档流后，原div的宽度变化了，只需要给div加上宽度100%即可，不到万不得已尽量不适用宽高属性，不然很容易出BUG 这里的BUG就是让导航栏其他原本距离右边有距离，这时变成了没有距离 ...
不要乱用position:fixed
极客神殿
02-18 1万+
经常会有一个需求，在一个固定窗口内容滚动，底下有操作按钮需要固定，不随着滚动，一般第一个念头就是用固定定位position: fixed，但是fixed是以窗口为父元素去定位的，这么做肯定是错的，需要正确使用相对定位和绝对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&g...
css中position的用法
最新发布
04-11
在CSS中，position属性用于控制元素的定位方式。它有以下几个取值： 1. static（默认值）：元素按照正常的文档流进行布局，不受top、bottom、left、right等属性的影响。 2. relative：元素相对于其正常位置进行定位，通过设置top、bottom、left、right属性来调整元素的位置。相对定位不会影响其他元素的布局。 3. absolute：元素相对于其最近的非static定位的父元素进行定位，如果没有非static定位的父元素，则相对于文档进行定位。通过设置top、bottom、left、right属性来调整元素的位置。绝对定位会脱离文档流，不占据原来的空间。 4. fixed：元素相对于浏览器窗口进行定位，通过设置top、bottom、left、right属性来调整元素的位置。固定定位会脱离文档流，不占据原来的空间。 5. sticky：元素在滚动到特定位置时变为固定定位，可以通过设置top、bottom、left、right属性来调整元素的位置。sticky定位会根据滚动位置和父元素边界自动切换为relative或fixed定位。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值