如何在dom节点上使用fixed定位?实现基于父节点而不是浏览器的滚动定位?一眼看懂,简单明了。

浏览器端实时声明核查器:基于Perplexity API的可信溯源方案 事实核查是数字时代的核心信息素养能力,其本质是通过权威信源比对、时效性验证与证据等级评估,完成对网络声明的可信度判定。传统搜索引擎依赖人工筛选,效率低且易受偏见干扰;而专业级核查工具需兼顾实时响应、本地隐私保护与结果可解释性。Perplexity Search API凭借其结构化引用返回、自然语言查询理解及高置信度评分机制,成为构建轻量级浏览器端核查系统的关键技术支点。本文聚焦‘浏览器端实时核查’这一落地形态,详解如何绕过CORS限制直连API、在Web Worker中安全执行查询增强、基于域名白名单与sc 阅读详情

一、想要实现的功能场景

想在一个node节点中实现滚动,但是我的文本要基于这个元素在滚动的时候浮起,类似于如下的功能
在这里插入图片描述
那么我们首先想到的必然是fixed固定定位,但是我们不得不考虑的一个问题就是,fixed是基于窗口来进行定位,无法做到类似于父相子绝的定位方式,因为fixed定位的就不是父dom节点,所以我们暂时先不用去考虑使用fixed方式定位。

二、父相子绝方式实现dom节点内元素滚动定位

其实我们如果不考虑使用fixed方式去实现dom内元素的滚动定位的话,其实还是很好实现这个功能的,只是走进了一个误区,有没有什么好的css属性可以实现此功能,然后不自觉的就钻进了牛角尖。
实现步骤:

1、给需要滚动的元素包裹一个父元素,然后定义为指定的宽高
2、层级为 <父><滚动元素></滚动元素><Fixed元素></Fixed元素></父>
3、采用父相子绝的方式将Fixed元素进行浮起,然后定位,给滚动元素设置滚动互不干扰,功能实现

2.1、父相子绝代码

  <!-- 父相子绝方式,构建一个新的父元素,父元素高度为本身的滚动元素高度,并且设置相对定位 -->
  <div style='position:relative;height:300px;'>
    <!-- 本身需要固定的父元素,现在为滚动元素,原有高度为300px,调整为100%高度;并设定overflow滚动 -->
    <div style="height:100%;overflow:auto;">
      <!-- 内容 -->
      <div style="height:800px;background:green;">我是测试数据</div>
    </div>
    <!-- fixed元素设定absolute,高度是基于爷爷元素定位,所以滚动元素其实影响不到当前元素的定位 -->
    <div style='position:absolute;width: 100%;bottom:50px;height: 20px;background:red;'>需要fixed的文本内容</div>
  </div>

2.2、实现效果

在这里插入图片描述

三、iframe中使用fixed方式实现

就像标题说的,如果我就是想用fixed的方式实现此功能,那么就用iframe标签去加载这个dom节点,这个dom节点也就被分割为了一个窗口,fixed是基于窗口,那么我们就可以直接使用fixed定位实现子元素的定位

3.1、fixed代码

  <!-- 采用iframe方式,然后去设定高度等,直接子元素设定fixed既是根据iframe进行定位,而不是根据窗口定位 -->
  <iframe style='height:300px;padding: 0;margin-top: 200px;' src="./iframe.html" frameborder="0">
  </iframe>

  <!--iframe.html-->
  <!DOCTYPE html>
	<html lang="en">
	
	<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>Document</title>
	  <style>
	    * {
	      margin: 0;
	      padding: 0;
	    }
	  </style>
	</head>
	
	<body>
	  <div style='overflow:auto;height:300px;background:blue;'>
	    <div style='position:fixed;top:0;background-color: pink;width: 100%;height: 20px;'>ceshi</div>
	    <div style='height:800px;margin-top:20px;'>可是我偏偏就是不想要转弯</div>
	  </div>
	</body>
	
	</html>

3.2、实现效果

在这里插入图片描述
iframe如何在vue中使用,可以参考下面两篇文章

vue使用iframe方式
iframe通信方式

四、总结

其实另外一种实现方式,我们也可以用js去计算节点被卷去的高度,滚动的时候不停的位移,然后将top进行一个变更,但是此种方法就没有必要了,包括第二种iframe嵌套的方式,其实如果就是想因为一个dom元素使用fixed去构建一个iframe窗口的话是没有必要的,所以我们还是推荐使用第一种方式。

H5页面一键分层实战:用AI Skill提取图层树与设计资源 前端重构或设计稿二次修改时,常遇到只有线上H5页面而没有源文件的窘境。面对活动页改版、视觉资源抽取等需求,传统截图抠图效率极低。本质上,浏览器只提供渲染结果,而视觉分层信息被压平在DOM树中。通过解析DOM结构、样式与几何信息,能够将页面重新组织为可编辑的图层树,并导出图片资源和标注图,这就是H5页面分层的核心原理。借助AI Skill机制,可将这一流程封装为可复用的自动化命令,在视觉还原与工程化协作中发挥巨大价值。从环境准备、脚本实现到排查落地,完整链路均可支撑团队快速搭建一键分层工作台。 阅读详情

相关推荐

前端面试题汇总

总结了一下之前面试遇到的问题,方便自己也方便他人

annier_11的博客 150

position:fixed实现相对于父级定位

position:fixed

callmeCassie的博客 1万+

中科闻歌前端面试题及参考答案

call、apply、bind 无法修改箭头函数内部 this,就算传入参数,绑定 this 的参数会直接被忽略。

大模型大数据攻城狮的专栏 173

fixed定位相对于父元素

fixed定位

jjxyh的博客 5016

linux redis7 完整的集群搭建过程

一。安装: 1.1 说明: Redis官方只提供了源码,并没有提供经过编译之后的安装包。 因此,安装Redis,要先编译、后安装。(即源码安装方式) 注意:需要联网安装 1.2 安装编译的工具: yum install gcc gcc-c++ -y 1.3 下载tar包,上传到linux服务器,解压配置环境变量 1.4 cd +解压的目录下:编译 make 注意:如果编译失败,请重新进行解压编译,...

m0_38028438的博客 719

STM32驱动GP2Y1010AU0F红外PM2.5传感器:从采样时序到浓度标定

在嵌入式环境监测项目中,模拟传感器输出信号的准确采集是系统可靠性的基石。许多工程师在接触红外散射式粉尘传感器时,常因不了解其特殊的脉冲驱动与采样保持机制,导致ADC读数异常。红外散射原理通过检测颗粒物散射光强来估算粉尘浓度,其输出信号并非稳定直流,而是与LED脉冲同步的短时窗口电压。理解这一时序特征,并掌握在STM32平台上通过定时器与ADC协同完成微秒级精准采样的方法,是获取有效数据的关键。该技术广泛应用于室内空气质量检测、空气净化器控制及DIY环境监测节点等场景。本文以GP2Y1010AU0F为例,详细

weixin_29159127的博客 283

CSS解决position:fixed基于父元素定位而不是浏览器窗口

众所周知fixed是基于浏览器窗口定位,但是今天遇到个问题,发现fixed并不一定是这样 有一个例外会使fixed是基于祖先元素定位。 当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。 <div class="container" style="transform:rotate(360deg);"> <div> <div class="box" style="position:fixed;"></div&

DDD4V的博客 1万+

Rockchip RK3568实战:手把手教你调试I2S音频驱动(附ALSA设备树配置详解)

本文提供Rockchip RK3568平台I2S音频驱动的实战调试指南。详细解析了从硬件连接到软件配置的全过程,重点涵盖ALSA驱动框架下的设备树配置、时钟计算、DMA参数设置以及常见问题(如无声、爆音)的排查与解决方法,帮助开发者快速定位并解决音频驱动难题。

weixin_28358083的博客 496

position: fixed如何相对父元素定位

在项目中遇到一个问题,项目中有一个弹框,弹框中有一个anchor组件,弹框中的内容可以滚动,而anchor组件需要相对于弹框保持固定。我们知道,position: fixed是相对于浏览器窗口进行定位,而弹框宽度是固定的,浏览器窗口的宽度则是不确定的,所以相对于浏览器窗口定位肯定不行。如何让anchor组件相对于弹框进行固定定位呢? 查了下资料发现,虽然position:fixed是对于浏览器窗口定位的,但是只要不设置fixed元素的top,bottom,left,right,此时该元素就是相对于父元素进

weixin_43487782的博客 9958

华为2288H V5服务器断电后‘趴窝’?别慌,手把手教你用SmartKit+BMC修复工具搞定

本文详细介绍了华为2288H V5服务器在断电后无法启动的修复方法,通过SmartKit和BMC修复工具进行故障诊断与修复。文章提供了从工具获取、安装到具体修复流程的完整指南,帮助运维人员快速恢复服务器运行,并给出了后续加固与预防措施,确保服务器稳定运行。

weixin_30575517的博客 297

HAMi 核心模块与架构设计

HAMi 的架构设计是围绕 Kubernetes 生态系统构建的,通过扩展 Kubernetes 的调度能力和设备管理能力,为用户提供了高效、灵活的异构设备虚拟化和管理解决方案。

北斗云的博客 2552

html position:fixed 定位问题

html position:fixed 定位问题 问题:在前端页面布局中有时我们一些坑爹的问题:比如position:fixed定位的问题,正常情况下fixed相对于浏览器窗口进行定位,正常情况下没有问题,当使用transform:translate(0px,-5px);属性后问题就出现了 首先我们了解下position这个属性的使用 值 描述 absolute 生成绝对定位的元素...

张宇的博客 1万+

基于SAHI算法优化YOLOv8的小目标检测性能研究

SAHI(SliceAwareHyperInference)是一种推理优化算法,通过将大图切片为小块并分别推理的方式,实现更精细的小目标检测。提升小目标检测精度:切片后的小目标在每个小块中占比更大,模型能够更好地聚焦。兼容性强:可直接集成到现有目标检测框架中(如YOLO系列、Detectron2等)。支持大分辨率图片和视频推理:减少硬件对大图推理的限制。本文详细探讨了如何通过SAHI(切片辅助超推理算法)结合YOLOv8模型,有效提升小目标检测性能,尤其是在高分辨率图片和视频场景中表现优异。

博客 2371

Selenium元素定位实战:XPath、CSS Selector与滚动可见性全解

在Web自动化测试中,元素定位是脚本稳定运行的基石。无论是基于XPath的复杂层级解析,还是CSS Selector的高效属性匹配,定位策略的选择直接影响测试用例的可维护性与执行效率。随着现代前端框架的普及,动态ID、异步渲染、iframe嵌套以及横向滚动区域成为自动化脚本的常见障碍。掌握相对路径、XPath轴、scrollIntoView等核心技术,能够有效解决元素不可见、被遮挡或加载延迟导致的交互失败问题。本文从定位策略设计出发,系统梳理八种定位方式的适用场景与坑点,并深入讲解页面左右滑动、滚动可见性处

weixin_28836875的博客 222

Python和Spyder:一个完美的编程组合

而Spyder作为一个专门为科学计算和数据分析而设计的IDE,提供了高效的开发环境和丰富的工具。无论是初学者还是专业开发者,Python和Spyder都能满足他们的需求,并为他们的工作带来便利和效率。本文将探讨Python和Spyder之间的关系,以及它们如何相互配合,提供一流的编程体验。每个工具都有其特定的优势和适用场景,开发者可以根据自己的需求选择合适的工具。而Spyder作为一个专门为科学计算而设计的IDE,提供了编写、调试和执行Python代码的环境。

CodeHeroicX的博客 1123

BDD测试用例:Playwright的MCP Server实战

Playwright MCP Server建立了大模型和真实的浏览环境之间的桥梁,可以让大模型操作多款浏览器完成测试任务。

Criss@陈磊 450

多模态自主AI代理:基于树搜索的网页交互智能架构

网页自动化正从静态脚本向动态决策演进,核心在于让AI具备类人的状态感知、路径规划与错误恢复能力。多模态指同步融合DOM结构、视觉布局、文本语义与交互反馈;自主性体现为无需预设流程即可动态生成动作序列;而树搜索则提供可解释、可回溯、可剪枝的决策骨架。该技术显著提升RPA在反爬强、UI多变场景下的鲁棒性,支撑金融比价、SaaS配置、高可靠数据采集等关键任务,是突破提示词工程瓶颈与页面微调即失效困局的工程化路径。

weixin_30788239的博客 563

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

HTML/CSS Layout Fundamentals: Building Your First Interactive Web Pages with the Easy-Vibe Project

> **导读**:本文以 Easy-Vibe 开源教程中的前端基础篇章为主体,系统讲解 HTML、CSS 与 JavaScript 这三大基石——它们如何把一张"电子海报"变成能点击、能输入、能实时响应的网页应用。读完本文,你将掌握 HTML 语义标签与页面骨架、CSS 选择器/盒模型/Flexbox 布局与 SCSS 预处理、JavaScript 的 DOM 操作与现代语法(ES6+、TypeS

gitblog_00544的博客 247

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

事件委托详解:从冒泡原理到性能优化实战

在DOM编程中,事件处理是前端开发的核心基础能力之一。当页面元素数量增多或列表动态渲染时,逐一绑定监听器不仅代码冗余,还会带来内存占用上升、事件重复触发等性能隐患。事件委托正是解决这类问题的经典方案:它依托事件冒泡机制,将子元素的事件监听统一挂载到父容器上,通过事件对象的target与closest方法精准定位真实触发元素,实现“一处监听、全局响应”。这一技术不仅能大幅降低监听器数量、规避动态元素的内存泄漏风险,还能让列表、表格、菜单等高频交互场景的代码结构更清晰。从原生JavaScript的addEven

weixin_31130435的博客 274

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

父级fixed_position:fixed相对父级元素定位而不是浏览器

position:fixed默认是相对浏览器定位的原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位HTML布局:JS Binfixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位abcdefghijklmnopCSS样式:.father {width:300px;height:3...

weixin_39631755的博客 2255

position:fixed 相对父元素定位

position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现。 这种方法本质上fixed元素还是相当于窗口定位的,实现效果上是相对于父元素定位。 此外,position:fixed元素会受到父元素的影响,而出现不能以窗口进行定位: 1. 因为fixed元素并不总是...

weixin_30364147的博客 1316

元素根据父级固定定位效果

css中的:fixed一般用来设置元素的固定定位,它的定位方式是依据窗口固定某个位置,在滚动滚动条的时候会一直固定在某个位置。 在开发过程中我们经常会遇到这样的效果:某个元素有滚动条,它的一个子元素需要固定在这个元素的可视区域的某个位置,不随着滚动条的拖动跟随移动。要实现这样的效果最先想到的就是使用position:fixed但是它并不能实现我们上边说的这种效果,经过反复实验总结除了两种实现此效果的方法: 第一种:使用position:absolute;来实现具体思路 首先我们要知道position:abs

qwguo 2093

关于position:fixed定位的位置不对的问题(即没有按照浏览器的窗口进行定位)

关于position:fixed定位的位置不对的问题(即没有按照浏览器的窗口进行定位)

brilliantSt的博客 2770

fixed相对于父元素定位

position:fixed;定位,只要不同时写top、left和top、right值,他就会默认居于父级进行定位。只是位置会偏左。 手动调整就好。 .div{ position:fixed; top:80px; margin-left:60px; width:340px; } top: 相对父元素高度 弹窗内有悬浮提示,内容高度固定(有滚动条) 如下: ...

LPLIFE的博客 4718

CSS技巧:使用定位设置盒子的高度

{ position:fixed; top:0; left:0; right:0; bottom:0; } 这样设置后子盒子的大小就等于父盒子大小

m0_52364694的博客 546

html中fixed属性,CSSposition属性中:fixed使用详解

是结合top、bottom、left和right这4个属性一起使用的,其中“position:fixed;”使得元素成为固定定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。当元素的position属性设置为fixed时,这个元素就被固定了,被固定的元素不会随着滚动条的拖动而改变位置。在视野中,固定定位的元素的位置是不会改变的。fixed固定定位和absolute绝对定位比较类似,它们都能够让元素产生位移,并且脱离文档流。/*设置元素为固定定位*/

m0_70664757的博客 4591
上一篇: git 拉取、推送 解决自动变基问题
下一篇: css 设置滚动条不挤压宽高
归来巨星
归来巨星 新星创作者: 前端开发技术领域 新星创作者: 前端开发技术领域
博客等级 码龄7年 5391粉丝 95原创
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值