我要说的是这部分的切图, 先说一下为什么要用到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. mysql查询分组归类函数-group_concat，通常与group_by一起使用

    select a.`name`,group_concat(b.name SEPARATOR'.') as persons from `group` as a,`person` as b,`person ...

  2. OD调试9—实例：深入分析代码完成软件破解

    OD调试9—实例:深入分析代码完成软件破解  爆破,是最初级的解决方案,不到万不得已,我们不直接修改JNZ通关.因为这样子的话,我们就享受不到破解.逆向的真正乐趣了. 了解程序背后按照剧情发展经常会出 ...

  3. C语言结构体的字节对齐

    Test Code: #include <iostream> #include <cstring> using namespace std; struct A{ int a; ...

  4. php 远程下载图片到本地

    大家好,从今天开始,小弟开始写写博客,把自己在工作中碰到的问题的解决方法纪录下来,方便以后查找,也给予别人方便,小弟不才,第一次写博客,有什么不足之处请指出,谢谢! 今天纪录的是怎么通过PHP远程把图 ...

  5. OSharp 学习（一）

    OSharp3.0 由郭明峰组织开发,已经相对比较完整,从底层代码开始阅读难度比较大. 故采用自上而下的方式,使用到的时候再完善相关功能.希望通过此教程能够找到志同道合的人. 注:请勿抄袭 请参看OS ...

  6. jsp跳转到servlet

    web.xml中url-pattern的值必须和相关联的jsp页面form中的action的值一样,才会从jsp页面跳转到servlet.

  7. BZOJ 1063 道路设计NOI2008

    http://www.lydsy.com/JudgeOnline/problem.php?id=1063 题意:给你一棵树,也有可能是不连通的,把树分成几个链,求每个点到根经过的最大链数最小,而且要输 ...

  8. poj3537--Crosses and Crosses

    题意:有个一维棋盘,两人轮流下棋,然后谁连成三个谁赢 记得去年fj夏令营有见过这题,但是太弱了, 不会做. 记忆化搜索,如果n<=3肯定先手必胜,递推即可. #include<iostre ...

  9. Windows 8.1 with Update 镜像下载（增OEM单语言版）

    该系统已有更新的版本,请转至<Windows 8.1 with update 官方最新镜像汇总>下载. 2014年4月9日凌晨,微软向MSDN订阅用户开放了Windows 8.1 with ...

  10. Android 中的接口回调

    http://blog.csdn.net/wangjinyu501/article/details/22052187   在Android中到处可见接口回调机制,尤其是UI事件处理方面.举一个最常见的 ...