CSS样式 : 定位中 结对位置

最新推荐文章于 2022-08-11 19:05:03 发布
最新推荐文章于 2022-08-11 19:05:03 发布
阅读量146 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjsx_youshou/article/details/106000499
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>POSITION</title>
</head>
<style>
    #div1{
        width:200px;
        height: 300px;
        border: 1px solid #b84d32;
    }
    #div2{
         width:200px;
         height: 300px;
         border: 1px solid #0cb80b;
        position: absolute;
        top: 300px;
        left: 200px;
     }
    #div3{
        width:200px;
        height: 300px;
        border: 1px solid #4312b8;
        position:absolute;
        top: 600px;
        left: 400px;
    }
</style>



<body>


<div id="div1">
    框一
</div>
<span id="div2">
    框二
</span>
<span id="div3">
    框三
</span>

<div id="parentDiv">

</div>


</body>
</html>

注意属性

position : 指定是相对 位置 还是绝对位置

相对位置 relative
相对位置relative
绝对位置absolute
绝对位置absolute

top : 顶部的距离
left : 左边的距离

大概效果图
在这里插入图片描述

右手。
关注
CSS——浮动与定位
weixin_44749830的博客
06-04 214
盒子模型 用于布局 要素： 内容区（content）:由盒子的宽高决定 内边距（padding）：指内容区与边框的距离 边框（border）：盒子边框的长度、样式、颜色 以上三要素会改变盒子的大小 外边距（margin）：盒子边框以外都叫外边距 外边距规定了盒子位置 ...
浮动-相对定位-结对定位
Jackzpc的博客
06-04 237
盒子模型 用于布局 要素： 内容区（content）:由盒子的宽高决定 内边距（padding）：指内容区与边框的距离 边框（border）：盒子边框的长度、样式、颜色 以上三要素会改变盒子的大小 外边距（margin）：盒子边框以外都叫外边距 外边距规定了盒子位置 浮动（float）：用于元素...
相对定位与绝对定位
qq_61771875的博客
02-06 1万+
实现某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子，我们可以利用定位来实现。 一、相对定位 relative ： 语法： 选择器{ position:relative;} 例如： CSS代码如下： .box1 { width: 200px ; height: 200px ; background-color: rosybrown ; } .box2 {
CSS相对定位和绝对定位
m0_46527751的博客
04-06 1万+
CSS相对定位和绝对定位相对定位绝对定位没有父盒子有父盒子时 文章参考进行了一定修改添加 相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。 相对定位和绝对定位是通过position属性来控制的，position属性的值为下面几种： 值 描述 absolute 使元素绝对定位，相对于static定位以外的最近的一个祖先元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative 使元素相对定位，相对于自己的
css定位（相对定位和绝对定位）
m0_72975897的博客
08-11 3291
css定位（相对定位和绝对定位）
CSS绝对定位
weixin_52629592的博客
06-20 8923
当元素的position设置为absolute时,则开启了元素的绝对定位用法: position: absolute;绝对定位的特点:与相对定位一样.开启了绝对定位以后,如果不设置偏移量,元素的位置不会发生任何改变开启绝对定位之后,元素会从原有的文档流中脱离.只是相对于它的包含块定位,包含块可能是文档流中的另一个元素或者是初始包含块绝对定位会改变元素的性质.行内元素变为块元素,块元素的宽度被内容撑开(即块元素中原有内容有多宽,开启绝对定位之后的块元素就有多宽)绝对定位会使元素提升一个层级下面我们来看一个栗子
简历资料
刘群智的博客
07-27 1827
专业技能 1.移动端前端开发，PC端前端开发 　　在阿里的几次面试中，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局 等方面的不同，但是还是很不系统，所以这里做一个总结。 第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机， 一般浏览器使用的都是webkit内核，所以说做移...
AJAX新手快车道.pdf
06-19
- **CSS (Cascading Style Sheets)**：用于定义页面样式。 - **HTML/XML**：用于结构化显示内容。 ##### 1.2 AJAX的特点 - **异步通信**：用户无需等待服务器响应即可操作页面，提升了用户体验。 - **局部刷新**：...
快速学习AJAX 的PDF
10-07
- **步骤三**：编写HTML结构和CSS样式，实现页面布局。 - **步骤四**：添加JavaScript代码，实现异步请求和数据处理。 - **总结**：通过本案例，读者可以了解到AJAX的基本工作流程和技术要点，为进一步深入学习...
css定位详解（相对定位、绝对定位和固定定位）
qq_38473254的博客
05-15 1万+
文章目录一、什么是定位？二、各个属性值的作用1、相对定位2、绝对定位3、静态定位4、固定定位三、相对和绝对定位1、相对定位2、绝对定位3、相对定位和绝对定位（1）相对定位（2）绝对定位四、相对、绝对定位与浮动1、相对定位2、绝对定位3、浮动4、相对定位与浮动5、绝对定位和浮动五、z-index的使用六、小结 一、什么是定位？ css中的position属性，position有四个值：relative（相对定位）、absolute（绝对定位）、static（静态定位）和fixed（固定定位），通过top、le
css 绝对定位和相对定位
每天学习一点点
11-10 8600
绝对定位 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占据空间。 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个网页。 实例1： <!DOCTYPE html> <html lang="en"> <head> &l...
css固定定位与绝对定位的区别
CaseyWei
07-14 5729
  绝对定位中当一个DIV块的位置被定义为绝对定位的时候，也就失去了文档流即失去原本的位置，并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找，直到找到body为止)来进行偏移, 固定定位其实和绝对定位有很多相似之处只不过是基于当前页面来偏移。 我们可以用代码来验证代码如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
css中的绝对定位
fighting_dream的博客
01-24 5910
今天来讲css中绝对定位： 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的 {position:absolute;} 1. 情况一：没有父盒子，即父盒子就是浏览器 html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
html5相对父元素定位,layer弹出层设置相对父级元素定位
weixin_36152359的博客
06-10 565
layer弹出层默认是相对body固定定位的，可是项目中一般需要相对某个盒子相对定位，下面是个加载弹层例子：var loadIndex = layer.open({type: 3, //3 表示加载fixed: false, //取消固定定位，因为固定定位是相对body的offset: ['60px', '132px'], //相对定位time: 5000, //定时关闭弹层ic...
CSS position: absolute 绝对定位精讲
热门推荐
DevilPace的博客
07-14 1万+
绝对定位基本特征 绝对定位的第一个特征在于会从文档流中脱离，不受其他元素影响，定位是“绝对”的，所以称之为绝对定位，如果是相对定位，会受其他元素影响，则定位是“相对”的； 未使用定位：即元素在正常文档流当中 .frame { margin: 0 auto; margin-top: 50px;
CSS相对绝对定位 总结
若水弹丸之地
03-13 3642
相对定位：relative 绝对定位：absolute、fixed 在文档流的：relative、 未完全脱离文档流的：浮动 脱离文档流的：absolute、fixed float 究竟有没有脱离文档流，为什么文字会围绕在float元素周围，而块状元素依然会忽略float元素？ 只能说明：float 未完全脱离文档流。 一、解释 1、position: st...
c#实现俄罗斯方块，面向对象实现
09-15
俄罗斯方块（Tetris）是一款经典的益智游戏，由俄罗斯程序员阿列克谢·帕基特诺夫于1984年开发。游戏的主要目标是通过旋转和移动不同形状的方块（称为“砖块”或“Tetrominoes”），将它们填充到屏幕底部的水平行中。当一行被完全填满时，该行会消失，玩家将获得积分。 游戏特点： 砖块形状：游戏中有七种不同形状的砖块，每种砖块由四个方块组成。 下落机制：砖块从屏幕顶部逐渐下落，玩家需要快速做出决策。 得分系统：消除的行越多，得分越高，连续消除多行会获得额外分数。 难度递增：随着游戏进行，砖块下落的速度会逐渐加快，增加了游戏的挑战性。 文化影响： 俄罗斯方块不仅在游戏界取得了巨大的成功，还成为了流行文化的一部分，影响了许多后续的游戏设计。它的简单性和上瘾性使其成为了历史上最畅销的电子游戏之一。 版本与平台： 自发布以来，俄罗斯方块已经在多个平台上推出，包括家用游戏机、电脑、手机等，形成了众多不同的版本和变种。
5G网络优化案例：关于解决诺基亚5G 700M站点小区闪断问题解决.pdf
最新发布
09-15
这份文件是关于解决诺基亚5G 700M站点小区闪断问题的详细案例报告，主要内容和关键要点如下： 问题背景与初步分析： 问题描述：随着5G 700M网络建设的推进，诺基亚700M现网出现较多误码告警和小区闪断问题，故障比例明显高于其他厂家站点。 初步定位：通过归类法分析，发现绝大部分误码问题发生在烽火单芯双向光模块小区，占比高达95.65%。 故障根因深入探究： 光模块适配问题：初步认为烽火单纤双向光模块存在问题，但更换后问题依旧，进一步分析为光模块与诺基亚设备的适配问题。 深入测试与定位：选取5个长期误码小区进行深入分析，与烽火厂家合作对光模块进行程序升级，问题得到初步解决。 AUTOBYPASS机制分析： 机制介绍：烽火光模块采用25G模块速率兼容10G，并开启AUTOBYPASS（CPR自动旁路模式）功能。 影响分析：AUTOBYPASS机制与诺基亚设备不适配，导致交互失败和误码产生。关闭AUTOBYPASS后，CDR时钟校验和恢复周期缩短，交互频繁，误码问题消失。 解决方案与实施： 解决方案：针对所有使用此类光模块的诺基亚站点，通过优化升级烽火光模块，关闭AUTOBYPASS功
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值