碰到如下问题：

如图，我设置了宽高和绝对定位 ，但实际上我图片显示宽度为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. win10//ubuntu安装tensorflow-gpu与kears，并用minist测试

    WIn10 安装cuda 先安装VS,然后根据自己的版本安装CUDA. 安装完后,打开cmd命令行输入nvcc -V,检测是否安装成功 安装cuDDN 安装对应版本,解压后覆盖到CUDA的地址,默认为 ...

  2. JavaScript--DOM，BOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  3. SpringBoot：Shiro 整合 Redis

    前言 前段时间做了一个图床的小项目,安全框架使用的是Shiro.为了使用户7x24小时访问,决定把项目由单机升级为集群部署架构.但是安全框架shiro只有单机存储的SessionDao,尽管Shrio ...

  4. nonparametric method|One-Mean t-Interval Procedure|

    8.4 Confidence Intervals for One Population Mean When σ Is Unknown 原先是 standardized version of x bar ...

  5. Bringing up interface eth0: Device eth0 does not seem to be present, delaying initialization.FAILED

    1.service network stop 2./etc/sysconfig/network-scripts目录下,删除想要删除的网卡配置,我要删除eth1,所以rm -rf ifcfg-eth1, ...

  6. svn使用3 （转）

    接下来,试试用TortoiseSVN修改文件,添加文件,删除文件,以及如何解决冲突等. 添加文件 在检出的工作副本中添加一个Readme.txt文本文件,这时候这个文本文件会显示为没有版本控制的状态, ...

  7. webstrom IDE 正则替换

    ide:webstrom 其他IDE,可以自行测试. 目的. 将excel的table两列(一般是中文名,英文名,改为Javascript 对象) 从 场所内网IP地址 IP_ADDRESS 源外网I ...

  8. quote|additives|Feel free to help| thick of |take in|soar|eternal|add up to|pull through| in reserve|

    A quote for a piece of work is the price that someone says they will charge you to do the work. Alwa ...

  9. 《内蒙古自治区第十二届大学生程序设计竞赛试题_D: 正品的概率》

    问题 D: 正品的概率 内存限制:128 MB时间限制:1 S标准输入输出 题目类型:传统评测方式:文本比较上传者:外部导入 提交:36通过:7 返回比赛提交提交记录 题目描述 袋中有m枚正品硬币,n ...

  10. 极力推荐大佬的java项目的博客

    此次说明:这是我从码云上拉取下来的java项目,仅供试验说明,不做任何获利渠道,若是发现有人拿此做其他用处,需像码云上这位大佬说明,特此感谢!!! 准备工作:     安装 maven,jdk1.8, ...