fixed固定定位

最新推荐文章于 2024-03-09 16:15:33 发布
最新推荐文章于 2024-03-09 16:15:33 发布
阅读量734 收藏
点赞数
分类专栏： 基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzl_Avery/article/details/68488749
版权
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   div{width: 200px;height: 50px;background: coral; position: fixed;bottom: 50px;}
  </style>
</head>
<body>
 <div>固定定位</div>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
 <p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
</body>
</html>

lzl_Avery
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
跨浏览器的实践:position:fixed 层的固定定位
10-30
在网页设计中，实现元素的固定定位（Fixed Positioning）是一项常见的需求，它可以使元素相对于浏览器窗口保持固定的位置，无论用户滚动页面如何，该元素总是在屏幕的特定位置。`position: fixed` 是 CSS 中的一个...
固定浮动定位(fixed)实现思路及代码
12-13
在网页设计中，固定定位（position:fixed）是一种常见的布局技术，它允许元素相对于浏览器窗口进行定位，即使在滚动页面时也会保持其位置不变。在本案例中，我们需要在页面底部中间固定一个区块，通常会使用`...
CSS学习21：fixed（固定定位）
玉安_ZhangDe的博客
04-09 3万+
固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。 语法： 选择器 { position: fixed; } 固定定位的特点：（务必记住）： 1.以浏览器的可视窗口为参照点移动元素。 跟父元素没有任何关系 不随滚动条滚动。 2.固定定位不在占有原先的位置。 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型） 完全脱标—..
CSS属性详解——position:fixed
Wod_7的博客
06-04 1万+
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
固定定位fixed
Liyunhao_haoge的博客
10-13 1523
固定定位fixed 固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后，它将脱离标准流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。 固定定位有两点： 1、固定定位的元素跟...
fixed定位
少油少盐不要辣
04-10 1万+
1.MDN中对于fixed定位的解释：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。 ...
前端必知：14.定位元素的认识及使用
qq_52799985的博客
07-16 659
相对定位相对于元素初始位置进行定位，绝对定位和固定定位相对于祖先元素或视口进行定位，而粘性定位是一种特殊的相对和固定定位的组合。在使用定位时，建议根据具体需求选择合适的定位方式，并进行必要的调整与配合，以达到预期的布局效果。常见的定位方式有相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位。4.相对定位的元素，天然提升层级，比没有定位的元素层级高。
IE6浏览器不支持固定定位（position：fixed）解决方案
09-25
有些朋友在进行网页布局时，会遇到IE6浏览器不支持固定定位(position：fixed)，本文将详细介绍此问题的解决方法，需要了解的朋友可以参考下
CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题
01-20
固定定位`fixed`的主要特点在于它不随页面内容的滚动而移动，这使得它在创建固定头部、侧栏或页脚等设计时非常有用。然而，仅仅设置`position: fixed`并不足以确定元素的具体位置。为了准确地放置元素，还需要提供边...
css定位属性position:fixed
wangooo的博客
01-02 3158
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
css：position / static默认属性 / fixed固定定位 / relative相对定位 / absolute绝对定位 / sticky粘性定位
最新发布
snowball的博客
03-09 1410
这意味着它将按照在HTML代码中出现的顺序进行显示，并且不会受到其他定位属性（如top、right、bottom或left）的影响。绝对定位，元素的位置相对于其最近的已经定位的父元素，如果最近的父元素没有定位则相对于文档进行定位。2、可以使用top、right、bottom和left属性来定义相对于元素原始位置的偏移量。3、当使用相对定位时，元素不会对其他相对定位或绝对定位的元素产生影响。的元素是文档流的一部分，忽略其他定位属性，如top、right、bottom或left。
Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解
IT全栈 华强工作室
09-10 1万+
CSS 提供了三种基本的定位机制：普通流、浮动和定位；通过这三种方式可实现页面的排版布局。 普通流 普通流中元素的位置由元素在 (X)HTML 中的位置决定： 块级元素独自占一行，在文本流中从上到下一个接一个地排列； 行内元素在一行中并排排列，遇到父元素的边沿会换行继续排列； 浮动 浮动会让元素脱离标准文档流，不再占原来的空间，可以让多个块级元素并排显示。 定位 定位是将元素定在某个位置，定位元素的层级要高于浮动元素； 通过定位可以让元素相对于其正常位置进行偏移出现在别的位置，或者相对于父元素、另一个元
前端技术——3——浮动与定位
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
02-24 4989
浮动与定位：float，position 块级标签：<div> <p> <h1-6> <ul><ol><dl> 内联标签：<a> <img> <input> <span><select><textarea> 正常文档流：将元素（标签）在进行排版布局的时候，按照从上到下，从左到右的顺序进行排版的一个布局流。如果都是内联标签，则一行最右边的标签显示长度大于当前行右边
CSS 固定定位 position fixed
热门推荐
cvper's world !
01-28 6万+
简单描述：固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；                 注意：固定定位的位置是  相对当前浏览器窗口  的； 代码示例： 1.我们先在页面中输出一个标准情况下的 div 元素，不添加定位；  代码： *{margin:0;
CSS3网页定位技术（3）——fixed浮动定位
abraham的博客
11-15 9471
三： Position还有第三个值：fixed Fixed和absolute差不多，有一点小的不同。 你会发现一些广告的页面，无论你怎样滚动滑轮，广告是不东的。   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="text/css"&a
position：fixed固定定位的用法
demin3278的博客
01-03 6414
一、position：fixed；固定定位 　　1.实现某个元素在可视窗口的居中位置显示 　　　　1）给自身设置宽高； 　　　　2）给自身加position：fixed； 　　　　3）用margin向左移动自身宽度的一半，向上移动自身高度的一半； 　　或： 　　　　1）给自身设置宽高； 　　　　2）再设置position：fixed； 　　　　3）再给自身设置left：0...
CSS——fixed 固定定位相对于父容器
05-19
如果想要实现相对于父容器的固定定位，可以将父容器的定位属性设置为relative，再将子元素的定位属性设置为fixed。这样子元素的定位将相对于父容器进行定位。下面是示例代码： HTML部分： ``` 我是固定定位的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值