固定定位哦

最新推荐文章于 2024-09-13 14:24:07 发布
最新推荐文章于 2024-09-13 14:24:07 发布
阅读量136 收藏
点赞数
分类专栏： 使用 文章标签： linq p2p html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58467224/article/details/125108185
版权
这篇博客主要探讨了HTML中固定定位的使用，通过示例展示了如何实现顶部导航条、侧边栏广告的固定定位效果，旨在帮助读者理解并掌握这一布局技巧。
摘要由CSDN通过智能技术生成

 

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>固定定位</title>

    <style>

        #box{

            width: 800px;

            height: 1600px;

            background-color: #ff0000;

            margin: 0 auto;

            margin-top: 44px;

        }

        .ad_l{

            width: 120px;

            height: 288px;

            position: fixed;

            top: 100px;

            left: 20px;

        }

        .ad_r{

            width: 120px;

            height: 288px;

            position: fixed;

            top: 100px;

            right: 20px;

        }

        .top{

            width: 100%;

            height: 44px;

            position: fixed;

            top: 0;

            left: 0;

        }

    </style>

</head>

<body>

    <img class="top" src="../images/top.png" alt="">

    <img class="ad_l" src="../images/ad_l.png" alt="">

    <div class="ad_r" id="box">

        <img src="../images/box.png" alt="">

    </div>

</body>

</html>

Shotoop
关注
专栏目录
CSS中你不知道的小细节
githubcurry
12-01 1871
anchor伪类 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */ 其中要注意的是，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才.
position fixed脱离文档流吗_文档流
weixin_39976251的博客
12-11 3416
目录基本概念理解以下几个重要的概念文档流Normal Flow块（block）、内联（inline）、内联块（inline-block）margin合并两种盒模型(border-box更符合人类思维方式)文档流基本概念（文档的流动方向）内联元素（inline）从左到右，到达最右边才会换行当内联元素<span>到达最右端时，发现空间不够会截取自己（字会断开）块级元素（block）从上到下...
定位
qq_43654065的博客
10-12 288
position：relative，相对定位，相对于盒子原来位置移动，元素设置此属性后仍然处于文档流中，不影响其他元素的布局。 position：absolute，绝对定位，元素脱离文档流，不占据文档位置，漂浮在文档流上方，相对于上一级设置了相对/绝对/固定定位的父级元素进行定位，如果找不到则相对于body定位。 position：fixed，固定定位，脱离文档，相对于浏览器窗口进行定位。 position：static，默认值，会忽略上、下、左、右设定的px和z-index。 position：inher
position fixed脱离文档流吗_css常用几种定位区别你知道吗？
weixin_39807896的博客
12-21 2601
加关注这种话银家怎么好意思说出口嘛常用3种定位1、相对定位(position:relative;)相对自身进行定位；不会脱离文档流。可根据自身位置进行left、right、top、bottom偏离！012、绝对定位(position:absolute;)当父元素不是定位元素时，相对body进行定位。如果父元素是一个定位元素，那将直接相对父元素进行定位。会脱离文档流。023、固定定位(...
文档流、常见的脱离文档流的属性
weixin_48796690的博客
10-09 336
文档流、常见的脱离文档流的属性
一、固定定位
kzwsa的博客
07-27 304
元素的位置相对于浏览器窗口是固定位置。1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的。这三种情况，子元素设置绝对定位，参照元素都是父元素。6.如果没有定位偏移属性，对元素本身有影响；相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏。4.能使不能设置宽高的行级元素设置宽高。子元素设置绝对定位，父元素设置相对定位。子元素设置绝对定位，父元素设置绝对定位。子元素设置绝对定位，父元素设置固定定位。3.不会随页面的内容滚动而滚动。1.子绝父相（一般都用这个）.
一、定位 固定定位
hu_xingwei的博客
07-24 594
一、定位
CSS基础学习之定位—流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
01-08
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的...
详解CSS 子元素相对于父元素固定定位解决方案
11-19
在CSS布局中，子元素相对于父元素的固定定位是一个常见的需求，这主要涉及到CSS的定位机制，包括绝对定位和相对定位。本篇文章将详细解析如何实现这个目标。 首先，我们来回顾一下绝对定位（absolute）和相对定位...
CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题
01-20
在示例代码中，若只有`position: fixed`而没有边位移，浏览器会默认将元素放在其在`static`定位下的原始位置，这实际上与期望的固定定位效果相悖。由于没有明确的偏移值，元素可能会覆盖其他内容或者出现在不可预期...
跨浏览器的实践:position:fixed 层的固定定位
10-30
在网页设计中，实现元素的固定定位（Fixed Positioning）是一项常见的需求，它可以使元素相对于浏览器窗口保持固定的位置，无论用户滚动页面如何，该元素总是在屏幕的特定位置。`position: fixed` 是 CSS 中的一个...
固定定位布局
09-07
固定定位布局是网页设计中的一种常见布局方式，它在CSS（层叠样式表）中扮演着重要的角色。这种布局模式允许元素的位置独立于文档流，即使在页面滚动时也能保持在屏幕上的固定位置。这对于创建导航栏、侧边栏、悬浮...
html脱离文档流,css固定定位脱离文档流怎么解决？
weixin_42511886的博客
06-03 6110
在我们做WEB前端开发写CSS样式的时候，有时需要使用到固定定位fixed，使用固定定位的话有时会出现固定定位的层脱离了文档流的问题，原因是没有给父级层设置相应的高度造成的，下面本篇给大家介绍一下如何解决这个问题。具体介绍我们需要创建一个简单的示例demo.html文件，然后里面放上两个DIV并设置背景色，给子DIV设置高度，代码如图接下来，我们运行看看，可以看到，当前的情况下，父DIV会因为子D...
css fixed 元素下坠 元素脱离文档流 position: fixed；
qq_485114707的博客
08-04 627
如下图所示 给元素设置position: fixed; 起脱离文档流 虽然没设置bottom为0 但是自动贴到底了 经多方研究 得出解决办法 给父级添加transform: translateZ(0); 就行 这个父级最好是最顶级的 ...
微信小程序：position: fixed导致的滚动时页面元素不跟着动的问题
IT老五
05-30 4305
由于对js的不熟悉，花了近半个小时才解决这个问题，现在记录下： 项目需要如上图所示的一个列表页面，唰唰唰…没花多长时间就完成了,在元素较少时，不需要滚动，使用一切正常； 后来添加了更多的item后，页面需要滚动，但是滚动的效果感觉莫名其妙，如下图： OMG？？？居然有部分元素不随着页面一起滚动…(ｷ｀ﾟДﾟ´)!!..一脸懵逼中… 没办法，有病得治，有Bug赶紧改…百度谷歌必应了一阵，后来...
移动端position:fixed滑动问题
MaRain
08-06 5828
前提在任务中需要我在页面上使用position：fixed 和 overflow：scroll 这两个属性，结果在手机端出现头部也跟着滑动的现象。那么怎么来处理这个现象呢？解决办法分别把position：fixed 和 overflow：scroll 两个属性分开到两个box中。<div style=" overflow : scroll"> <div style="position:f
position:fixed 造成页面抖动解决办法
_NIXIAKF的博客
09-13 1329
position:fixed 造成页面抖动解决办法
脱离文档流的三种方法
icbjhbcjkbda的博客
10-16 6178
HTML元素脱离文档流
Kafka面试题
最新发布
Jack章臣的博客
09-13 411
总的来说，如果你的系统需求是大数据处理和实时流分析，Kafka 是更好的选择；如果你关注的是消息可靠性、多种消息协议支持或需要良好的管理界面，RabbitMQ 可能更适合；而 ActiveMQ 则在需要 JMS 完整支持和更多的高级特性时成为了首选。选择合适的消息系统需要考虑不同的技术需求和业务目标，如消息吞吐量、数据持久性、系统扩展性和开发资源。在做决策时，要仔细权衡每种队列管理系统的优势和局限，并充分理解其在不同场景下表现的差异。
css固定定位
05-30
CSS的固定定位是一种常见的定位方式，可以让元素在页面中始终保持固定的位置，不随页面滚动而移动。使用CSS的position属性来实现固定定位，将其设置为fixed即可。例如： ```css #myDiv{ position: fixed; top: 0;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值