HTML 绝对定位

于 2023-11-17 17:16:00 发布
阅读量216 收藏
点赞数
分类专栏： HTML自学历程 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tongwei117/article/details/134467346
版权
本文介绍了一种利用绝对定位让盒子固定在网页版心右侧的小技巧，方法是设置left为50%，再用margin-left为版心宽度的一半，实现对齐效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

记录一下盒子在绝对定位时靠近版心的一个小技巧，仅供参考学习

如何让盒子固定在版心右侧小技巧

1、让固定定位的盒子 left：50%，先走到浏览器可视区域(也可以看做版心)的一半位置

2、让固定位置的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置，就可以让固定位置的盒子贴着版心右侧对齐了

html绝对定位自适应不同分辨率,如何利用“自适应网页设计”实现不同的设备上呈现同样的网页...
weixin_33438009的博客
06-07 1333
据百度官方最近发布的《2013年中国网站运营发展趋势报告》中数据表明，2012年，PC端网站增速较大，数量较2011年增加29%；PC无线化速度加快，12年PC网站无线化比例达到40%。网络的普及，也逐步的带动了PC网站的发展。而人们上网的方式也变的多样化了，其中比较值得关注是就是3G网络的普及，使得越来越多的人开始使用手机上网，关于这点，我个人的马海祥博客网站就深有体会，在年前年后的这半个月的期...
html实现导航下拉菜单绝对定位,纯CSS导航下拉效果,神奇的定位与显示属性
weixin_42315706的博客
06-03 2840
导航下拉，大家首先想到的是用JS来做。或许是大家看到的下拉菜单演示，多是JS控制的下拉，导致从先入为主的意识上，误以为二级下拉是很难的东西，必须要会Javascript才能做。其实，一个简答的下拉效果，根本不需要JS也能做。比如，我目前在用的Yuan，以及之前用的趣儿等，所用的下拉，都是利用CSS来做，而且还是CSS2，兼容性也不错(除了IE6)。在分享CSS效果之前，我觉得，应该对当前的需求，做...
html如何给盒子设置位置,CSS盒子定位
weixin_35094438的博客
06-04 1万+
又到周末了，又结束了一周的课程了，表示昨前天开始老师布置家庭作业开始写页面了，前天的还好，12点之前搞定，昨天的熬到2点，表示大神不要笑哈，毕竟能力有限，第二天看了老师的讲解，才发现做了非常多的无用功，好了，闲聊就到这里吧，下面我分享下这周老师讲到的一些内容，以下都是自己的理解哈，仅供参考：CSS盒子定位：什么是盒子定位呢，顾名思义，就是元素盒子(以下主要以块级盒讲解)在页面中的位置，定位就是确定...
html中的固定定位的用法
小魏快起床的博客
11-23 5982
在上一篇博客中html中的定位知识点如何使用_小魏快起床的博客-优快云博客给大家主要分享了html中的绝对定位和相对定位的用法，那么里面提到了一个固定定位，这个总该解释解释吧，咱们也是一个有始有终的开发者。固定定位用 position: fixed;然后用方向词进行偏移，然后就固定起来啦！！！
html 盒子水平居中和水平垂直居中的一些方法
Suowi的博客
03-09 1万+
HTML水平居中和垂直居中
定位的概念（HTML）
原地起飞
07-31 1774
文章目录前言HTML中为什么需要定位？一、定位1.定位的组成2.定位模式1、static 静态定位 (默认)2、relative 相对定位3、absolute 绝对定位4、fixed 固定定位5、粘性定位sticky （了解）总结 前言 HTML中为什么需要定位？ 1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子 一、定位 1.定位的组成 定位=定位模式+边偏移 &nbs
html把图片定位在盒子中心,固定HTML盒子位置 首先,新建一个html文件
weixin_39713219的博客
05-30 3586
html中两个盒子位置问题我想让黑色方框的盒子 移动到红色箭头位置 就是我想让盒子实现移动 如何那张图片的宽度有多大？不手动移动靠居中和宽高的设置还是可以做的， 如果你想手动控制文本位置，就是用绝对定位absolute，通过改变top|left值来移动。css 固定定位造成两个DIV重叠，如何清理？怎么让一个DIV绝对定位到页面的正中间首先,新建一个html文件在html文件上找标签,在标签中创建...
css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)
09-24
在CSS布局设计中，绝对定位是一种强大的工具，用于精确控制元素在页面上的位置。然而，当面临不同分辨率的设备时，绝对定位可能会遇到显示问题。本文将深入探讨如何确保使用CSS绝对定位的元素在不同分辨率的电脑上...
绝对定位元素被遮挡的解决方法
09-25
在网页设计中，CSS的定位属性是核心知识点之一，其中绝对定位是一种常见的布局手段。使用绝对定位可以将元素放置在相对于最近已定位（非static）祖先元素的指定位置。然而，在实际应用中，绝对定位的元素有时会遇到...
css 相对定位 绝对定位 浮动 分析
12-09
CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px，...
html 盒子模型基础（相对定位，绝对定位，固定定位）（八）
热门推荐
余正源的博客
02-07 1万+
1.相对定位： .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: yellow; /*margin-
CSS盒子的定位
lvmengmeng
04-07 2122
转自：http://www.cnblogs.com/stephen-liu74/p/3333704.html 相对定位       使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。       使用relative，即相对定位，除了将position属性设置为rel
前端开发_HTML5_盒子定位(position)
u013185175的博客
12-17 3622
盒子定位(position) 1.引入 我们知道浏览器在解析html页面的时候是按照标准的文档流方式就行解析的。即html页面元素是按照从左到右、自上而下的方式进行排布(我们可以这样认为，整个页面是一个二维坐标，坐标的原点在左上角，坐标轴的方向如下所示)，我在进行页面布局的时候，需要页面元素按照指定的方式或者是位置进行排列。这一个我们就需要定位元素的摆放位置。下面我们一起学习一下盒子的定位问题。 2.盒子定位(position) (1).分类:盒子定位根据给出的不同的方式，给出了6种不...
html 将盒子固定浏览器,浏览器默认css样式表 css之左盒子固定,右盒子自适应的一种实现方式...
weixin_31470259的博客
06-10 862
浏览器默认css样式表在页面布局或者是列表布局中，我们经常出现一个场景：左边是固定宽度的盒子，右边自适应：div>label>Open...maoguiyou2016年09月13日 19:152549sorry！小主把截图截的偏了所以看着好像不居中，但是是居中的哦，还有截图上的floatbox有position：fixed样式，这里没有粘贴哦。。????拒绝理由就打死我发的是看见发货单...
html盒子定位方式,前端-html、css(三)-定位、flex
weixin_30647423的博客
06-09 483
定位css中定位有三种方式fixed absolute relative。通过定位，能够控制页面的排版布局，通过left 、right、top、bottom来控制位置。先记住一个口诀子绝父相，后面再详细说明。css中通过position属性来进行定位div.button {position:absolute;}复制代码相对定位 relative相对定位是相对于自己原本的位置进行定位，元素并没有脱离...
css绝对定位之对齐居中版心内容
fighting_dream的博客
01-25 984
假如我想让一个盒子固定在我中部版心位置，应该怎么办呢？ 方法如下： 没有定位之前，他们是普通的两个盒子，html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum
html中盒子的定位,css盒子的定位有哪些方法？
weixin_36143290的博客
06-07 3575
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。什么是盒子定位呢，顾名思义，就是元素盒子(以下主要以块级盒讲解)在页面中的位置，定位就是确定他的位置，盒子定位分为以下四种 ：推荐：css手册1、静态位置(position：static)也就是默认值：每一个元素...
html盒子的相对位置,CSS盒子的相对定位于绝对定位 ·
weixin_30069591的博客
06-04 1601
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？之前看了CSS的布局与定位，看的云里雾里的，不是太理解，这里做实验总结一下。为了便于理解，这里引用两个空间：另外设置了absolute与relative定位的元素对其他元素影响主要包括：父辈元素。下一个兄弟元素。后面的实验均以下面的布局为基础，对它们只是设置了颜色，没有设置任何布局，以标准文档流从上下到下布局。box1 ...
CSS之㉓定位位于版心/边缘的小方法
笔岸柳影
02-17 501
CSS之㉓定位位于版心/边缘的小方法 QQ:3020889729 小蔡居中/靠边缘定位图示意居中示意靠边缘示意靠版心边缘代码实例（以固定定位为例，至于居中是差不多的，介于篇幅就省略了） ...
html绝对定位
最新发布
05-08
### HTML 中绝对定位的使用方法 #### 定义与基本概念 HTML 的 CSS `position` 属性用于定义元素的位置模式。当设置为 `absolute` 时，表示该元素相对于最近的已定位祖先元素进行定位；如果不存在这样的祖先，则相对于初始包含块（通常是浏览器窗口）。绝对定位通过指定四个方位属性 (`top`, `right`, `bottom`, `left`) 来调整元素的具体位置[^1]。 #### 关键特性 - **脱离文档流**：绝对定位的元素不再占据页面中的空间，其他内容会像它不存在一样布局。 - **依赖于上下文**：如果没有设定任何祖先元素为相对、固定或其他非静态定位方式，那么绝对定位将以整个视窗作为参照系[^3]。 #### 实现水平/垂直居中 对于一个具有固定宽度和高度的小型组件来说，可以利用百分比配合负外边距来实现精确的中心对齐效果。例如给定一个宽高均为80像素的方块： ```css .centered-element { position: absolute; top: 50%; left: 50%; margin-top: -40px; /* 半个高度 */ margin-left: -40px; /* 半个宽度 */ width: 80px; height: 80px; } ``` 此代码片段展示了如何让 `.centered-element` 类名下的所有对象在其父级容器内部达到完美的中间放置状态[^3]。 #### 处理层叠顺序(z-index) 在多个重叠区域的情况下，可以通过调节 z-index 数值控制它们之间的显示优先度。默认情况下，后来声明或者更靠近用户的项目会被渲染得更高一层之上。但是只要显式指定了不同的z-index层次级别就可以改变这种自然行为: ```css .one, .two, .three { position: absolute; } .two { z-index: 2; } .three { z-index: 3; } ``` 这里设置了三个不同类别的 div ，并通过赋予各自独特的 z-index 值确保即使它们互相覆盖也能按照预期展示出来. #### 路径引用外部资源(如图像) 当涉及到跨目录结构加载媒体文件比如图片的时候需要注意路径书写准确性。假如目标素材位于当前网页所在文件夹之外的一个子目录里头的话就需要采用双点加反斜杠的形式返回至上一阶再进入相应的目标地址访问链接。举个例子要连接至名为 'images' 文件夹内的某张照片可写成如下形式: ```html <img src="../images/example.png"> <a href="../../another_folder/images/sample.jpg">Sample Image</a> ``` 这些语句分别指向了上一级以及越过了两级之后找到的目的物位置说明^[2]^. ### 结论 综上所述，在实际开发过程中灵活运用以上技巧能够帮助我们更好地掌控页面上的各个组成部分从而构建更加复杂精美的视觉界面设计作品。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值