我要说的是这部分的切图, 先说一下为什么要用到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. 使用WinAPI全局热键注册和全局模拟按键

    一.全局热键注册 1.先引用DLL [System.Runtime.InteropServices.DllImport("user32.dll")] //导入WinAPI publ ...

  2. MS-SQL数据库备份方法

    一.手动备份 打开企业管理器 --> 右键点击需要备份的数据库 --> 所有任务 --> 备份数据库 或者: 查询分析器: use master  backup database 数 ...

  3. 空值排序(oracle和sqlserver)

    oracle认为 null 最大. 升序排列,默认情况下,null值排后面. 降序排序,默认情况下,null值排前面. 改变空值办法: (1)用nvl函数或decode函数将null转换为一特定值 替 ...

  4. apache 反向代理配置(ubuntu)

    1.配置apache2的站点文件 cd /etc/apache2/site-avaliable sudo vim edy.conf 具体配置如下: # 反向代理配置 # 监听所有80端口的访问 < ...

  5. HDU 5903 - Square Distance [ DP ] ( BestCoder Round #87 1002 )

    题意: 给一个字符串t ,求与这个序列刚好有m个位置字符不同的由两个相同的串拼接起来的字符串 s, 要求字典序最小的答案    分析: 把字符串折半,分成0 - n/2-1 和 n/2 - n-1 d ...

  6. CODEVS 1066/洛谷 P1514引水入城

    1066 引水入城 2010年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description 在一个遥远的国 ...

  7. CI框架uri去掉index.php

    CI框架的入口是index.php,所以url实际上要多出一个index.php,非常不美观.我使用的是apache服务器,要开启mod_rewrite服务才可以. sudo a2enmod rewr ...

  8. Oracle11g R2学习系列 之六数据库链接，快照及序列

    Create public database link link_name Connect to user identified by password using 'DBName' 为'DBName ...

  9. Maven基础教程

    更多内容请参考官方文档:http://maven.apache.org/guides/index.html 官方文档很详细,基本上可以查找到一切相关的内容. 另外,快速入门可参考视频:孔浩的maven ...

  10. php中的MVC模式运用

    [size=5][color=Red]php中的MVC模式运用[/color][/size] 首先我来举个例子: 一个简单的文章显示系统 简单期间,我们假定这个文章系统是只读的,也就是说这个例子将不涉 ...