一、HTML和CSS基础--网页布局--实践--固定层效果
absolute和fixed的相同点:
第一,完全脱离标准文档流
第二,未设置偏移量时,都定位在父元素的左上角
absolute和fixed的不同点:
第一、当设置偏移量时,偏移参照基准不同
absolute:1、没有已经定位的祖先元素,以<html>为基准偏移
2、有已经定位的祖先元素,以距其最近的、已定位的祖先元素为基准偏移
fixed:有、无已定位的祖先元素,都以浏览器可视窗口为基准偏移
第二、表现形式(产生滚动条时)
absolute:位置会随滚动条变化
fixed:1、位置固定,不会随滚动条变化
2、被它遮盖的元素,可以从其下穿过
在对元素设置固定定位时,如果希望本元素包含在其父包含块中,不需要对其设置偏移量(可以以京东商品介绍栏为例)
案例:1 固定层效果
实现方法:将此区域设置为position:fixed,top:0,left:0 注意当设置为固定定位的时候,此区域即脱离了标准文档流,其后面的内容会占据定位元素的位置。注意设置后面的内容的上边距(固定定位层的高度+原有边距)。
一、HTML和CSS基础--网页布局--实践--固定层效果的更多相关文章
- 一、HTML和CSS基础--网页布局--实践--导航条菜单的制作
案例一:导航菜单的制作 垂直菜单
- 一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
- 一、HTML和CSS基础--网页布局--如何用css进行网页布局
什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...
- 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...
- DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- PHP.4-DIV+CSS标准网页布局准备工作(下)
DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...
- PHP.3-DIV+CSS标准网页布局准备工作(上)
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
- 利用css进行网页布局
网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...
- css:层叠样式表-网页布局基础
css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...
随机推荐
- sleep()
经常看到线程中用sleep(),到底是什么用处,下面讲的比较通俗: 我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段时间.那么你有没有正确的理解这个函数的用法呢?思考下面这两个问题: ...
- _stdcall与_cdecl(了解)
调用约定(Calling Convention)是指在程序设计语言中为了实现函数调用而建立的一种协议.这种协议规定了该语言的函数中的参数传送方式.参数是否可变和由谁来处理堆栈等问题.不同的语言定义了不 ...
- yii框架常用url地址
调用YII框架中 jquery:Yii::app()->clientScript->registerCoreScript('jquery'); framework/web/j ...
- SqlServer Link 链接服务器的使用
--创建linked exec sp_addlinkedserver 'a','','SQLNCLI','your ipaddress' --登陆linked exec sp_addlinkedsrv ...
- 10.23lamp环境
前序: 查考文章:http://www.cnblogs.com/mchina/archive/2012/11/28/2778779.html http://www.centos.bz/2011/09/ ...
- [原] Android performClick无效,UI线程理解
原因 开发过程中遇到button.performClick()无效,原因是View.performClick()需要再UI线程中调用才会有效执行. 响应系统调用的方法(比如报告用户动作的onKeyDo ...
- spring所需包下载
1.进入http://repo.spring.io/webapp/search/artifact/选择artifacts,在搜过栏输入spring-framework,点击查询出来的表头artifac ...
- [HDU5015]233 Matrix
[HDU5015]233 Matrix 试题描述 In our daily life we often use 233 to express our feelings. Actually, we ma ...
- MD(d)、MT(d)编译选项的区别
1.编译选项的位置 以VS2005为例,这样子打开: 1) 打开项目的Property Pages对话框 2) 点击左侧C/C++节 3) 点击Code ...
- 能用Shell就别编程-海量文本型数据的处理
对于txt文本类数据,优先采用shell脚本,实在不行才用Python,Java,MySQL 1) Shell命令行或脚本的处理速度极快,比Java快得多. 2) Shell代码量少,几个命令就能完成 ...