我要说的是这部分的切图, 先说一下为什么要用到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. C# 大小写转换

    全部大写: string upper = str.ToUpper() 全部小写: string lower = str.ToLower(); str是需要转换的字符.

  2. K3整理

    当金蝶提示“该模块使用已超过正式版许可最大数!”,需要解决的办法是: 打开K3的“帐套管理”系统,“系统(S)”菜单-“系统使用状况(D)”-系统使用状态窗口,然后点击橡皮擦 删除即可了.

  3. GDI+(Graphics Device Interface)

    1创建画布(创建Graphics对象) Bitmap bitmap = new Bitmap(80,80); Graphics g=Graphics.FromImage(bitmap); 2创建Pen ...

  4. 在用EF新增对象存贮至数据库时汪报错，但数据库里没有新增数据

    大致的问题是这样的: 原来一直用存贮数据的方法是用的是:DBContext.AddToXXXX(),这个方法.在写代码的时候看到VS提示这个方法已失效,推荐使用DBContext.XXXX.AddOb ...

  5. VPN错误789：L2TP连接尝试失败

    VPN 错误789:l2tp 连接尝试失败,因为安全层在初始化与远程计算机的协商时遇到一个处理错误 Windows配置VPN,选择“使用IPsec的第2层隧道协议(L2TP/IPSec)”时, XP系 ...

  6. hdu 畅通工程续

    算法:多源最短路(floyd) 题意:有多个城镇,有些之间有通路,给你起点和终点,输出最短路径: Problem Description 某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路 ...

  7. ubuntu中安装eclipse

    1.下载eclipse安装包 http://mirror.neu.edu.cn/eclipse/technology/epp/downloads/release/kepler/SR2/eclipse- ...

  8. Java中的日期操作

    在日志中常用的记录当前时间及程序运行时长的方法: public void inject(Path urlDir) throws Exception { SimpleDateFormat sdf = n ...

  9. 在ubuntu 12.04 中配置java环境(安装jdk, tomcat, maven, eclipse)

    1. 安装jdk 1.7 在ubuntu( /usr/lib/jvm/java-7-openjdk-amd64 )中默认有安装jdk 1.7 如果没有 可下载 : http://www.oracle. ...

  10. [FML]学习笔记一Cross-validation交叉验证

    在实际的工程中,有时labeled data的数量不足以留出validation sample(验证样本)否则会导致training sample(训练样本)的数量太少.为了解决这个问题,我们引入一种 ...