关于移动端position的问题

移动端布局技巧
最新推荐文章于 2025-01-09 09:42:00 发布
原创 最新推荐文章于 2025-01-09 09:42:00 发布 · 973 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#移动端 #position

本文探讨了在移动端开发中，如何正确使用CSS属性使元素精准定位至底部的问题。通过具体实例，阐述了在设置元素绝对定位至底部时，若忽略left属性的设定，可能导致的布局偏移现象，以及解决此问题的方法。

在写移动端的时候，想将最后一个内容放到底部，设置width:100%;position:absolute;bottom:0px;父级设置了position:relative;会出现偏移现象，原因居然是子没有left：0。

Cold__Star
关注
移动端滚动问题
12-05
首先，我们来理解移动端滚动问题的背景。在Web页面上，滚动通常由浏览器默认处理，但在移动设备上，由于触摸事件的存在，原生的滚动行为可能无法满足复杂的交互需求。例如，我们可能需要自定义滚动条样式、阻止页面...
Vue项目移动端滚动穿透问题的实现
10-15
在移动端开发Vue项目时，常常会遇到一个常见的问题——滚动穿透（Scroll Passthrough）。这个问题指的是用户在页面某一层级（如导航栏、侧滑菜单）进行滚动操作时，滚动事件会穿透到页面的下一层级，导致下层内容也...
移动端上下导航布局一：position
等待のL先森的博客
12-03 321
移动端上下导航布局一：position 如图： 我们移动端，有上下两个，固定的栏目，中间是内容；可以用position定位来完成； 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
移动端— position: fixed;固定定位解决方案
diaopinglan6176的博客
05-21 2807
这里有个关键的东西叫做viewport，你经常在页面的头部里可以见到它： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 想起来了吧，就是它让你的页面不会像在桌面上那样显示，玩过windows的放大镜功能吧，你可以把viewport想象成一个类似的放大镜，fixed的元素是相对...
移动端web页面使用position:fixed问题总结
u012028371的博客
06-28 3470
这个问题在做红酒商城的时候遇到过，不太还解决，一下这篇文章对处理这类问题有个总结 原文：http://blog.youkuaiyun.com/ly2983068126/article/details/49306427
一、定位：position
qq_40704765的博客
01-30 488
position： 1.position:fixd;固定定位，以浏览器可视窗口为参考对象，不会受父级的影响，一但给元素设置了固定定位属性或浮动属性，那么无论这个元素本身是行级还是块级，都会支持宽高的设置，但是对于块级标签来说，它将不再继承父级元素的宽度，必须由其内容撑开。设置了固定定位，一定要初始化元素的位置。 2.position:relative;相对定位，不会改变元素的默认表现，
ios移动端fixed定位元素在滑动页面时上下抖动的解决方案
lihaofeifei的博客
08-10 5373
根据实际代码，对比以下三种情况进行调整 一、滚动元素不要包含fixed元素。 <!-- 滚动元素不要包含fixed元素 代码示例如下--> <body> <div class="header">fixed固定元素</div> <div class="main">滚动内容</div> </body> <!-- 滚动元素和fixed元素在同一容器下时就会出问题 代码示例如下--> <bo
移动端热点问题
MingL520的博客
05-31 667
像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。//ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。
H5页面在移动端常见问题及解决方案
qq_29896351的博客
12-27 445
移动端总会遇到一系列特定于移动设备的问题，分享下常见的移动端常见问题的处理方案。
移动端开发兼容性问题全解（优化版）
weixin_45379279的博客
01-09 2598
移动端开发的兼容性之路虽然充满挑战，但并非无法逾越。只要开发者深入了解各类兼容性问题及其根源，熟练掌握并运用上述解决策略，通过精心细致的代码编写与反复严谨的测试，就一定能够跨越重重障碍，为广大用户呈上流畅、美观且功能完备的移动端应用，在激烈的市场竞争中脱颖而出。
在手机自带浏览器遇到的一个关于position的坑,absolute设置的位置没出现在预期...
weixin_34198797的博客
04-18 1129
结构是这样的 <div class="box"> <div class="content">something</div> <div class="inner"></div> </div> 样式是这样的 .box { position: relative;...
css-position定位属性及其层级关系
JandyPam的博客
11-05 1124
首先是遵循DOM的规则，同级的后面居上。 一般有定位属性的元素会高于无定位属性的同级元素。 都有定位属性的同级元素，z-index大者居上 。 如果是非同级的元素，则会忽略元素本身z-index，取与对比元素同级的祖先元素的z-index属性，大者居上。 ...
css在ios和android设备上的兼容性问题（移动设备不同内核浏览器样式兼容性）笔记
热门推荐
CM logs
10-12 1万+
position属性带来的浮动问题： 项目案例： 网宿流量微信公众号活动红包抽奖页面； 问题描述： 在input被获取焦点时，屏幕上position属性值为absolute的元素，包含input，会被弹出的虚拟键盘顶起，导致显示样式异常 设备： android设备存在此问题，而ios设备显示正常 原因分析： css属性中对容器的样式中提到，子元素定位方式为absolute或者fix
H5响应式设计中使用JQ的offset,positon方法获取位置不准的解决方法
u010711754的博客
03-06 1109
应用场景：H5响应式开发，使用弹性布局（Flex）问题重现：使用offset,positon方法获取某一个Dom的绝对/相对坐标，在PC端显示正常，但是在手机端上确出现偏差。问题解决思路：刚开始以为是兼容性问题，但是发现所有的手机都是一样 。然后在手机端Debug的时候发现每次的偏差量都不一样，猜想可能是渲染问题，图片没加载完成的时候 是不占位置，所以得到的偏差连。问题解决：使用 load来解决问...
CSS定位position的层级关系问题
weixin_44703582的博客
10-11 1989
目录 前言 一、position是什么？ 二、position属性 1.静态定位(static) 2.绝对定位（absolute） 3.相对定位（relative） 4.固定定位（fixed） 三、层级关系 示例：​ 总结 前言 CSS属性一共有x、y、z三条轴，但z轴只有使用了position属性时，z轴上的层级关系才体现出来，所以z-index这个属性只有定位元素才有。 一、position是什么？ position 属性规定元素的定位类型。 二、positi
移动端绝对（固定）定位问题与解决
weixin_46240162的博客
11-14 2247
移动端绝对（固定）定位问题 在公司做移动端界面时，暴露了几个隐藏的不容易发现的问题，最典型的就是绝对（固定）定位的问题，趁着现在项目差不多做完了，记录一下。 出现的问题 原因 首先这种需求使用定位做是完全没用任何毛病的。当手机在输入文字的时候，手机回调出键盘，键盘和浏览器的窗口时同层的，就导致浏览器的高度变低了，定位的元素自然也就往上漂浮了。 解决方案 这个问题真的时搞了我很久，最初以为是没有给出写死的高度的原因，发现无论怎么给高度结果都一样，也参考了网上很多的咨询，这种问题有以下几种解决方案
一种移动端position:absolute布局：
weixin_30906701的博客
11-22 292
一种移动端position:absolute布局： 1.他父级不需要加上 position:relative; 如果父级不是不是body，则加position:absolute; 2.红色加量部分是必须加 <!DOCTYPE html> <html lang="en"> <head> <meta charset...
微信小程序使用absolute定位出现的偏移和宽高问题
weixin_44687485的博客
08-04 1725
微信小程序下使用absolute居中定位时出现的问题 使用微信开发者工具开发微信小程序 分别用before和after伪类来作为加号（+）的横和竖，发现横和竖不管怎么调整都有点偏离原本应该居中的位置。 .add-btn{ width: 40rpx; height: 40rpx; background: linear-gradient(90deg, #E84369 0%, #DF2757 100%); border-radius: 999rpx; position: relative; text-align
html页面整体偏移了怎么办,html_位置偏移属性position(示例代码)
weixin_29484035的博客
05-31 3141
定位属性位置属性position：static、relative、absolute、fixed偏移属性：top、bottom、left、right浮动定位属性：float/clear1.浮动定位 float-流定位(默认定位)： 块级元素从上到下，行内元素在一行中从左到右排列水平布置。-浮动定位:-让元素脱离普通的流定位-将浮动的元素放置在父元素的左边或者右边float：left/right浮动定...
移动端兼容性问题
最新发布
11-04
移动端开发由于移动设备的多样性，包括不同硬件配置、操作系统版本和浏览器，面临诸多兼容性挑战。以下是一些常见的移动端兼容性问题及解决方案： ### 常见问题类型 - **日期处理问题**：如ios端 `new Date()` 问题 [^2]。 - **输入框相关问题**：input框语音按钮显示、input按钮设置 `disabled` 属性显示异常、移动端字体小于12px时显示异常 [^3]。 - **点击高亮效果问题**：ios和Android端均存在点击高亮效果问题 [^3]。 - **动画闪屏问题**：transition闪屏问题 [^4]。 - **边框显示问题**：移动端1px边框显示问题 [^5]。 ### 解决方案 - **输入框语音按钮**：input框添加样式 `input::-webkit-input-speech-button { display: none; }` [^3]。 - **点击高亮效果**：修改移动端的点击高亮效果，使用 `-webkit-tap-highlight-color: rgba(0,0,0,0);` [^3]。 - **ios环境下input按钮显示**：设置 `input[type=button]{ opacity: 1; }` [^3]。 - **消除transition闪屏**：使用 `-webkit-transform-style: preserve-3d;` 和 `-webkit-backface-visibility: hidden;` [^4]。 - **移动端1px边框**：原先元素的border去掉，然后利用 `:before` 或者 `:after` 重做border，并通过 `transform` 的 `scale` 缩小一半，原先的元素相对定位，新做的border绝对定位，示例代码如下： ```css .border-1px{ position: relative; border:none; } .border-1px:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } ``` [^5]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值