碰到如下问题：

如图，我设置了宽高和绝对定位 ，但实际上我图片显示宽度为0；

然后我就查了一下，发现是因为我设了公共img宽度有个max-width:100%；屏蔽掉就有正常宽了，这点暂时没明白为啥

不过当图片设置为postion:absolute的时候，它的父级元素需要设置position:relative,它的宽高会根据父元素的宽高来设置，如果没有设置父元素的position:则按浏览器作为父元素的宽高算

至于怎么算我也不太清楚

目前如果我取消position,图片是可以正常显示的，

或者说它的父元素设置宽高（它父元素设置了position:relative,但是没有设宽高）

position:absolute和width的关系的更多相关文章

  1. position:absolute溢出处理

    今天在做布局的时候发现把table设置了position:absolute后 overflow居然不管用了,溢出的部分依然溢出. 百度后,才想起来... ... position后,元素已经和父元素不 ...

  2. 【总结】我所整理的float, inline-block还有position:absolute

    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

  3. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  4. position absolute 绝对定位 设置问题

     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...

  5. position:absolute绝对定位解读

    position:absolute绝对定位解读  摘要   用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...

  6. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  7. css position:absolute 如何居中对齐

    写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center

  8. 关于position:absolute的困惑

    今天在学习<精通css>时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的positi ...

  9. IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...

随机推荐

  1. 原生html，css+js写下载按钮有提示动画效果的落地页

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8&q ...

  2. python3下scrapy爬虫(第十四卷：scrapy+scrapy_redis+scrapyd打造分布式爬虫之执行）

    现在我们现在一个分机上引入一个SCRAPY的爬虫项目,要求数据存储在MONGODB中 现在我们需要在SETTING.PY设置我们的爬虫文件 再添加PIPELINE 注释掉的原因是爬虫执行完后,和本地存 ...

  3. 使用这些高效Java工具类享受开发乐趣

    使用这些高效Java工具类享受开发乐趣导语在Java中,工具类定义了一组公共方法,这篇文章将介绍Java中使用最频繁及最通用的Java工具类.在开发中,使用这些工具类,不仅可以提高编码效率,还可以提高 ...

  4. Python使用pycharm导入pymysql(MySQL)或pymssql(SQLServer)

    file->setting->project->project interperter,双击右侧出现的pip,弹出安装包,搜索pymysql->选择第一个->Instal ...

  5. dim|lobby|trifle|

    ADJ-GRADED 勉强的;不情愿的If you are reluctant to do something, you are unwilling to do it and hesitate bef ...

  6. String的compareTo用法

    String的compareTo其实就是依次比较两个字符串ASC码.如果两个字符的ASC码相等则继续后续比较,否则直接返回两个ASC的差值.如果两个字符串完全一样,则返回0.来看一下代码. publi ...

  7. CF-1144F-Graph Without Long Directed Paths

    题意: 给出一个无向联通图,要求你给出每条边的方向,使得无论从哪个点出发最多只能走一条边: 思路: 对于每个点,要么出度为0,要么入度为0即可.所以这就是一个判断二分图. 二分图 #include & ...

  8. 响应式WEB页面开发实践

    转自:https://github.com/markyun/My-blog/issues/27 最近得到一个新任务单,让我用一套页面适应所有主流终端(Android.iPhone.iPad.PC),而 ...

  9. 领域驱动（DDD）之我见，基于Golang实现

    分享一点不成熟的理解,还请本着交流进步的大原则喷之.从去年开始接触和套用DDD以来,已经有1年多时间了.也先后在2个生产项目中主导应用. 一.一些概念 DDD经典分层: 分层架构的一个重要原则是:每层 ...

  10. 吴裕雄--天生自然 R语言开发学习：功效分析（续一）

    #----------------------------------------# # R in Action (2nd ed): Chapter 10 # # Power analysis # # ...