关于position和float的用法！

时间 2019-11-08

标签关于 position float 用法栏目 CSS 繁體版

原文原文链接

我要说的是这部分的切图, 先说一下为何要用到position javascript

看个人截图, 应该知道这块的组成是有两部分, 但中间那个绿圈中, 组成的两个部分有重叠的, 这时候, 可能会想用float, 但float有一个问题, 就是当在同一行的width加起来大于所在div的宽度时, 就会分行了!! css

因此就要用position的absolute解决 float的问题.html

通常我会先写结果, 无论里面是什么图片仍是标签java

首先在最外面用一个div, class=top_modulejquery

具体的css div.top_module{position: relative;width: 100%; height: 503px;}ide

这个div是重点, 必须在css里声明position: relative; 这个div声明了relative后, 其实里面声明position:absolute 都是这个div为参考物, 像里面的absolute元素声明了left:0px(还有其余的), 就会和这个声明relative的左边靠在一块儿了! spa

另外宽度和高度也是必须的, 后面再说缘由!!htm

div.top_module div.slideBox{position: absolute;width: 768px; height: 476px;left: 0px;bottom: 0px;}blog

div.top_module div.latestsnap{position: absolute;width: 280px;height: 452px;top:0px;right: 0px;background-color: #1e1;} 图片

position: absolute 这个不用说了, 还有大小, 这两个子元素都是用 left, right, top bottom 这些来定位,

这里要说的就是, 在用了position后, margin padding这些都会失效的, 由于这两个只有在display含有block 下才会生效的. 像display:block, 和display:inline-block;

并且div是默认为display:block的

就连a标签, 默认状况下都没办法用margin padding, 这时通常会给a标签声明一个display:inline-block;

当用了position:absolute后, 会另不少属性失效的, 其中有一个问题就是absolute的父元素不会再根据其实子元素所须要的宽度和高度自动调节自身的宽高

<!DOCTYPE html>

<head>

<style>

div.module{width: 1007px;margin: 0px auto;}/*不知道为何把这部分独立后, css的优先级下降了不少, 彻底不生效了*/

div.top_module{position: relative;width: 100%; height: 503px;}

div.top_module div.slideBox{position: absolute;width: 768px; height: 476px;left: 0px;bottom: 0px;background-color: #ddd;}

div.top_module div.latestsnap{position: absolute;width: 280px;height: 452px;top:0px;right: 0px;background-color: #1e1;}

</style>

</head>

dfadsf

</div>

dffadsf

</div>

</body>

</html>