碰到如下问题：

如图，我设置了宽高和绝对定位 ，但实际上我图片显示宽度为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. npm基本语法

    npm -version  查看npm版本 npm install <name>  安装node.js的依赖包 npm install <name> @3.0.6 安装版本为3 ...

  2. VBA编程常用词汇英汉对照表

    表 20‑1到表 20‑8是VBA编程中使用频率最高的英文单词,按字母排序.词性列中,a表示形容词,n表示名词,v表示动词,p表示介词以及其他词性. 表 20‑1 VBA编程常用词汇表 单词 中文 词 ...

  3. Java虚拟机内存划分

    Java虚拟机在执行Java程序时,会把它管理的内存划分为若干个不同的数据区.这些区域有不同的特性,起不同的作用.它们有各自的创建时间,销毁时间.有的区域随着进程的启动而创建,随着进程结束而销毁,有的 ...

  4. [Linux] Windows 下通过SecureCRT 访问 Linux

    不愿意装双系统的,可以借助虚拟机(Vmware, Virtual PC等) 安装linux 进行使用. 至于如何使用虚拟机安装Linux 这部分,很简单: 下载好需要安装的Linux ISO 镜像文件 ...

  5. 对Java8新的日期时间类的学习（二）

    示例11 在Java中如何判断某个日期是在另一个日期的前面还是后面 这也是实际项目中常见的一个任务.你怎么判断某个日期是在另一个日期的前面还是后面,或者正好相等呢?在Java 8中,LocalDate ...

  6. CDN是什么鬼

    CDN,内容分发网络,是大多数互联网业务里必不可少的部分,但大多数互联网从业人员不是特别清楚CDN究竟是什么,以及它可以为我们做哪些事情. 我们还是从之前介绍的<不同的人看到的直播为什么不一样? ...

  7. maven中 pom.xml与properties等配置文件之间互相读取变量

    问题由来: 最近公司的maven项目需要改进,希望把该项目依赖的一系列artifact放到properties文件中,这样做的目的是是为了很容易看到四月份release和七月份的release,它们所 ...

  8. 合并cookie，提取json数据

    发送的第3个请求需要前两个请求的cookie,需要对cookie进行合并 发送的请求数据来自于json数据中的某个键值. 这里是删除所有的对话主题目录,每一个目录有一个id,发起删除对话主题目录的请求 ...

  9. Luogu_2878_[USACO07JAN]保护花朵Protecting the Flowers

    题目描述 Farmer John went to cut some wood and left N (2 ≤ N ≤ 100,000) cows eating the grass, as usual. ...

  10. Chrome 调试 react-native 通过Network面板查看网络请求

    参考 https://github.com/facebook/react-native/issues/934 三楼 真机或模拟器下 Debug JS Remotely, 会打开chrome,地址为ip ...