CSS绝对定位法

最新推荐文章于 2022-11-23 16:24:04 发布
最新推荐文章于 2022-11-23 16:24:04 发布
阅读量231 收藏
点赞数
分类专栏： css 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52634719/article/details/127558376
版权

下面来看下绝对定位

 

是根据父容器的右上角做偏移

这个家伙的父容器是body!!!body的右上角，然后是正数，往下偏移

 

 

 

绝对偏移：原来的位置没了，就被星期四所占了

 而相对定位是针对原来的位置做偏移，所以还保留着原来位置

 

绝对定位和原来的组织没关系，因为它要依靠的是它爸爸

再来看一个绝对定位，这里相对body右下角，然后往底下的上面偏移

 

 

然后body在调整它也在动

 

如果是负数，就飞出去了

 

 

爱雨天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css教程之绝对定位使用详解
12-13
如果说相对定位没有脱离文档流，相对于对象本身进行偏移有点拖泥带水的话，那么绝对定位绝对是快刀斩乱麻，因为绝对定位可以使一个对象脱离正常的文档流，好像是漂浮在正常文档流的上空,并相对于包含此对象的元素...
CSS分栏布局的方法:绝对定位和浮动
12-01
在CSS布局设计中，创建...同时，随着CSS Flexbox和Grid布局的发展，这些新的布局模式提供了更为强大且灵活的解决方案，可以在很多情况下替代绝对定位和浮动，但理解并掌握这些基本方法仍然是每个前端开发者必备的技能。
css 绝对定位
赶路人儿
04-10 1068
position的四个属性值： relativeabsolutefixedstatic 下面分别讲述这四个属性。      sub1      sub2 1. relative relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属
css绝对定位
weixin_33860528的博客
12-25 184
绝对定位是我们在使用css时经常使用到的一种布局方式，下面说一下什么是绝对定位。 绝对定位使用position:absolute来定义，首先，要理解的是使用了绝对定位的元素它会脱离文档流，所谓脱离文档流就是它在文档中原来的位置已经不存在了，和它前面及后面的元素都没有什么关系了，我们可以看到一个div元素如果脱离了文档流后，它后面的元素位置会上移，这个div就像是多了一层一样盖在其他元素上面。也正...
css的绝对定位
weixin_41748671的博客
03-24 165
1. 绝对定位元素的祖先元素没有使用非static的属性进行定位时 此时，绝对定位元素相对与初始包含块ICB进行定位 初始包含块ICB是包含html的块，相当于html的父元素 1. html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
CSS 绝对定位
还想做MAD
03-22 209
<div class="left" style=" position: relative; "> <img src="/static/plugin/2019-index/img/logo_new.png" style=" position: absolute; top: 0; ...
css---绝对定位
weixin_46218101的博客
09-30 236
前端入门笔记之css（6） 绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。 绝对定位的语法：{position: absolute} 1.脱离标准流：绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。 2.原来的位置不会保留 3.绝对定位是根据有定位的父级元素进行定位 4.如果父级元素
css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)
09-24
本文将深入探讨如何确保使用CSS绝对定位的元素在不同分辨率的电脑上正常显示其定位位置。 首先，我们需要了解常见电脑的分辨率。笔记本电脑通常具有1366*768的分辨率，而台式机则可能为1920*1080或更高。不同分辨率...
div+css相对定位和绝对定位用法实例详解
09-25
本教程将深入探讨两种主要的定位方式：相对定位和绝对定位，这两种方法在DIV+CSS布局中尤其常用。 1. 相对定位（relative） 相对定位是CSS定位的基础，它保持元素在正常文档流中的位置，但允许通过`top`、`right`、...
绝对定位元素被遮挡的解决方法
09-25
主要为大家介绍了绝对定位元素被遮挡的解决方法,涉及使用css绝对定位的使用技巧,非常具有实用价值,需要的朋友可以参考下
CSS绝对定位
weixin_52629592的博客
06-20 8866
当元素的position设置为absolute时,则开启了元素的绝对定位用法: position: absolute;绝对定位的特点:与相对定位一样.开启了绝对定位以后,如果不设置偏移量,元素的位置不会发生任何改变开启绝对定位之后,元素会从原有的文档流中脱离.只是相对于它的包含块定位,包含块可能是文档流中的另一个元素或者是初始包含块绝对定位会改变元素的性质.行内元素变为块元素,块元素的宽度被内容撑开(即块元素中原有内容有多宽,开启绝对定位之后的块元素就有多宽)绝对定位会使元素提升一个层级下面我们来看一个栗子
css中的绝对定位
fighting_dream的博客
01-24 5864
今天来讲css中绝对定位： 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的 {position:absolute;} 1. 情况一：没有父盒子，即父盒子就是浏览器 html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
CSS样式的绝对定位
qq_44865278的博客
11-20 236
1.绝对定位可以将样式定位在指定区域,在绝对定位对象之后的文本或对象在被定位对象被脱离正常文档流之前会占有它的自然空间. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS样式的绝对定位</title> <style type="text/css"> #div1{ background-color: red;
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
热门推荐
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
CSS中position属性详解
猫老板的豆
05-13 556
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动(float)、绝对定位(absoulte)和固定定位(fixed)。属性是否脱离文档流是否占位定位原点static否是没有特定的原点，按照正常的文档流进行定位relative否是相对于它在正常文档流中的原始位置进行定位absoulte是否最近的已定位祖先元素 或 初始包含块（通常是视口）fixed是否浏览器窗口sticky否是。
css绝对定位有什么用,css中的绝对定位是什么意思
weixin_31205797的博客
08-04 606
css中的绝对定位是什么意思发布时间：2021-07-16 12:05:23来源：亿速云阅读：84作者：chen本篇内容主要讲解“css中的绝对定位是什么意思”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css中的绝对定位是什么意思”吧!绝对定位意思是将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其...
CSS四种定位-绝对定位
WangZhang_521的博客
01-02 293
01-没有祖先元素或祖先元素没有定位 <!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">
css样式的绝对定位
qq_51476492的博客
03-16 513
css样式的绝对定位 position样式设置为绝对定位后，left样式和top的样式的值表示该标记离整个网页左边和上边的距离，即相对于整个网页左上角的位置。
css绝对定位和相对定位
最新发布
08-29
### 回答1： ...综上所述，CSS绝对定位和相对定位都是布局技术，使用不同的定位原点来实现元素的定位，相对定位相对于元素原来的位置进行定位，而绝对定位则相对于最近的非静态定位的祖先元素进行定位。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值