我要说的是这部分的切图, 先说一下为什么要用到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. Csharp 高级编程 C7.1.2

    第七章 代理(1) 一.代理要声明 二.代理使用步骤 声明代理 初始化代理(使用 实例的方法名 作为参数) 使用代理 代码示例: /*C7.1.2*/ using System; using Syst ...

  2. linux环境下jdk 安装以及maven私服搭建

    1:准备资源      linux服务器,jdk和nexus  安装包    2:网络通畅,保持windows端和linux服务器端网络通畅.     3: 安装jdk和配置环境变量      进入到 ...

  3. 解决linux下oracle进入sqlplus环境中后退键显示^H、上下键无效与ctrl+l无法清屏等问题【weber出品必属精品】

    习惯linux中上下键回退历史输入的人们肯定也希望sqlplus中也能实现相同的效果,可是不幸的是,sqlplus中不提供诸多方便的快捷键,这个时候我们就需要另外安装一个插件来实现这个想法. 这个插件 ...

  4. POJ 1002 - 487-3279 STL

    先把不是标准格式的字符串变成标准格式再输出出现两次以上的标准串和出现的次数不然输出 "No duplicates." #include <iostream> #incl ...

  5. 基于nginx的HLS简单服务器搭建

    一,首先搭建nginx服务器: 1.1,选定源码目录 选定目录 /usr/local/HLS cd /usr/local/HLS 1.2,安装PCRE库 cd /usr/local/HLS 到www. ...

  6. uva11426 欧拉函数应用

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=121873#problem/F 题目大意:给你一个数n,让你输出(i=1-> ...

  7. IntelliJ IDEA14如何配置tomcat

    http://doc.okbase.net/frank1234/archive/121479.html

  8. [Mugeda HTML5技术教程之13]链接的添加方式

    在广告主的需求中,有很多情况下需要在动画中添加一些外部链接.这份文档就在Mugeda动画中添加外部链接的方式,做一下梳理. 1.通过点击触发的链接 就是要用户点击屏幕来触发链接的情况,这是推荐使用的方 ...

  9. django解决跨域请求的问题

    跨域请求可以用jsonp来解决,不过今天我发现一个很好用的包:django-cors-headers 只需要简单地配置一下就可 被请求方的setting.py中的配置如下: INSTALLED_APP ...

  10. python安装——Windows平台

    刚刚申请博客,第一次写随笔,记录下自己最近的学习情况,希望自己能够不断的学习,不断的丰富自己~ 最近刚开始学python,记录一下,希望大家相互学习,批评指正~ 1.下载python:https:// ...