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

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

所以就要用position的absolute解决 float的问题.

一般我会先写结果, 不管里面是什么图片还是标签

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

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

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

另外宽度和高度也是必须的, 后面再说原因!!

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

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>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>dfdf</title>

<script type="text/javascript" src="jquery.js"></script>

<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>

<body id="index">

<div id="module" class="top module" style="width:1007px;margin:0px auto;"><!-- 不生效只能这样做了,一般我是绝对不会在标签上写style的 -->

<div class="top_module">

<div class="slideBox">

dfadsf

</div>

<div class="latestsnap">

dffadsf

</div>

</div>

</div>

</body>

</html>

关于position和float的用法！的更多相关文章

  1. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  2. 装载：对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  3. CSS布局 ——从display，position， float属性谈起

    页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...

  4. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

  5. CSS布局 ——从display，position， float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  6. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  7. jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

  8. position,display,float,overflow,margin,padding之间的相互影响

    1.元素分为块级元素和行内元素, 块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题.行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且 ...

  9. 盒模型、position、float详解css重点汇总

    元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一 ...

随机推荐

  1. 关于css3的rgba

    在rgba之前,我们应该知道rgb.它就是红色R+绿色G+蓝色B.那rgba是什么?简单的说就是在rgb的基础之上加上一个通道alpha.他的语法如下: r    红色值.正整数(0~255) | 百 ...

  2. 使用kindeditor 注意

    ValidateRequest="false"引用编辑器要在最上端加入上面的话

  3. VS2010使用附加进程的方式调试IIS中的页面介绍

    1.       对要测试的页面设置断点,然后选择”调试”->”附加到进程”,在进程中选择w3wp.exe进程(需要先打开需测试的页面) 2.       配置完成,当打开你需要测试的页面的时候 ...

  4. 华为oj 计算字符个数

    练手而已 #include <stdio.h> #include <string.h> int main(void) { char string[200]={'\0'}; in ...

  5. 点击推送消息跳转处理（iOS）

    当用户点击收到的推送消息时候,我希望打开APP,并且跳转到对应的界面,这就需要在AppDelegate里面对代理方法进行处理. 当用户点击推送消息打开APP的时候会调用 - (BOOL)applica ...

  6. android与PC互传文件 adb push

    1- df 命令查看文件系统的磁盘空间占用情况 shell@android:/ # adb shell df 2- 找到data文件夹, 上传 adb push /data/Sogou  Input_ ...

  7. Python入门学习之input()与raw_input()的区别

    登陆博客时才发现已经注册一年了,由于之前一直都没有打算从事软件开发行业,所以博客便被束之高阁,软件开发,对于我来说,是成长,更是磨炼.头脑风暴总是来去自由,记录灵感,与大家一起共享思维进步的成果. P ...

  8. 分数（有理数）的四则运算PAT1088

    2015-02-05 PAT- B1088. Rational Arithmetic (20) http://www.patest.cn/contests/pat-a-practise/1088 #i ...

  9. uva201 Squares

     Squares  A children's board game consists of a square array of dots that contains lines connecting ...

  10. SpringMVC–SSH -- RESTful -- JSR303

    最近在使用SpringMVC+MyBatis感觉用起来效果很好.我不太明白SpringMVC和SSH的关系,遂搜索了一下.原来使用SpringMVC之后,可以替代之前的SSH这种开发模式. 附上知乎链 ...