`

CSS层的叠加

    博客分类:
  • html
 
阅读更多
本文引用:http://sunshuaij2ee.iteye.com/blog/894867

在常用html编写中,有很多地方用到两个层的叠加,也就是两个层的位置的设定问题。其实没有那么复杂,在此做个简单的演示,一看便知。层里面你可以放图片或其他什么的。(像现在的团购网站 购买按钮图片那块用到的比较多)
<div style="position: relative;">//这个层为外面的父层,只需设置相对位置样式即可
  <div style="position: absolute;">//这个为里面要叠加的层,只需设置绝对样式
    <img src="img/sunshuai.jpg"/>//这个为层里面的内容图片
  </div>
  <img src="20110110/871_129391305700000000.jpg"/>//这个为父层内容
</div>

备注:1,父层和子层以及它们里面的内容的大小样式根据自己的应用自己设置调整。
            2,可根据设置子层的left和top样式使叠加的层的位置发生改变。
分享到:
评论

相关推荐

    CSS 层叠加的5条原则

    CSS 层叠加的 5 条原则 CSS 层叠加是网页布局中一个非常重要的概念,它决定了 HTML 元素在浏览器中的排列顺序。了解 CSS 层叠加的 5 条原则是非常必要的,以便更好地控制网页的布局。 法则一:同辈元素定位方式...

    纯CSS3鼠标点击图片叠加浮动层注释信息

    "纯CSS3鼠标点击图片叠加浮动层注释信息"这一主题涉及到的技术点主要包括CSS3的选择器、过渡效果、伪类以及相对定位等。 首先,我们需要理解CSS3中的选择器。选择器是CSS3中用来指定需要应用样式的HTML元素的方式。...

    CSS层叠样式表

    根据来源、特异性、优先级等因素,CSS规则会按层次叠加。 **2. CSS选择器** - **基本选择器**:包括标签选择器(如`p`)、类选择器(`.class`)、ID选择器(`#id`)和通配符选择器(`*`)。 - **组合选择器**:可以...

    Css Div浮动叠加层效果(网易邮箱登陆效果).

    Css Div浮动叠加层效果(网易邮箱登陆效果). Css Div浮动叠加层效果(网易邮箱登陆效果).

    icon.css层叠样式

    网页上各种按钮标签的样式,好东西值得你拥有。

    jquery幻灯片插件图片层叠加按钮控制图片大小缩放切换

    总结来说,"jquery幻灯片插件图片层叠加按钮控制图片大小缩放切换"是一个结合了jQuery事件处理、CSS3动画和HTML布局的复杂交互功能。通过学习和掌握相关技术,开发者可以创建出更加生动、有趣的网页元素,提升用户的...

    CSS3注释叠加效果.zip

    在前端开发中,CSS3(层叠样式表第三版)为网页设计提供了许多新的特性和功能,其中之一就是注释叠加效果。这个效果通常用于增强用户体验,通过动态改变或展示注释来实现信息提示或者交互反馈。在这个名为"CSS3注释...

    CSS3绘制3D银行卡片层叠展示特效

    【CSS3绘制3D银行卡片层叠展示特效】是一种利用CSS3的新特性来实现的交互式网页设计技术。在这款特效中,多个卡片以3D视角呈现,形成一种立体堆叠的效果,当用户将鼠标悬停在某个卡片上时,该卡片会通过滑动动画效果...

    div+css实现div的多层重叠,并且居中显示

    我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的...源代码+自己写的教程,希望对初学div+css的朋友有启发。

    2个css3-rotate圆环叠加旋转特效.rar

    《CSS3旋转圆环叠加特效解析与应用》 在网页设计中,动态视觉效果往往能吸引用户的注意力,提升用户体验。CSS3作为现代网页设计的重要工具,提供了丰富的动画和过渡效果,其中旋转(rotate)特效尤为突出。本篇将...

    CSS两张图片叠加透明显示特效

    在"CSS两张图片叠加透明显示特效"的例子中,我们通常会有两层图像:一层是背景图片,另一层是人物图片。为了实现这种效果,我们需要为这两张图片设置不同的CSS层叠顺序和混合模式。以下是一个基本的HTML结构示例: ...

    CSS3图片层叠弹性动画

    之前我们分享过很多非常炫酷的CSS3和HTML5图片层叠切换动画,比如CSS3/jQuery实现移动端滑动图片层叠效果和jQuery多张图片上下叠加切换插件。今天我们要分享的是一款基于CSS3的图片层叠弹性动画,当我们将鼠标滑过...

    html5+css3圆角图文展示卡片层叠滑动切换特效.zip

    "css"文件夹则存放着CSS样式,定义了卡片的外观和交互效果;"img"文件夹则用于存储卡片上的图像资源,可能包括产品图片、图标等。 总的来说,这个压缩包提供了一个基于HTML5、CSS3和jQuery的动态展示卡片的完整解决...

    纯css3实现3D波浪形动画

    【纯CSS3实现3D波浪形动画】是一种利用CSS3的强大功能来创建动态、立体效果的技术。在网页设计中,这种技术可以增加视觉吸引力,提高用户体验,尤其适用于网站背景、按钮、头像等元素的设计。CSS3是层叠样式表...

    关于position、absolute、relative层叠加的技巧

    关于 position、absolute、relative 层叠加的技巧 Position 属性是 CSS 中的一种布局方式,用于控制元素在文档中的位置。Position 属性有五个值:static、relative、absolute、fixed 和 inherit。其中,static 是...

    jQuery 3D图片叠加css3翻转图片切换特效

    【jQuery 3D图片叠加css3翻转图片切换特效】是一种现代、动态的网页交互设计技术,它结合了JavaScript库jQuery的强大功能与CSS3的新特性,为用户提供了一种立体、富有视觉冲击力的图片展示方式。这个特效允许用户在...

    simple-css-overlay:简单的 CSS 叠加

    在"simple-css-overlay:简单的 CSS 叠加"项目中,我们将深入探讨如何使用 CSS 创建这样的叠加层。 首先,了解 CSS 的基本选择器和属性是至关重要的。这包括 ID 选择器(#id)、类选择器(.class)、标签选择器...

    CSS2.0+CSS3.0的chm文档

    4. **层叠和继承**:CSS的核心特性之一,允许样式按照特定规则叠加,并且子元素能从父元素继承样式。 5. **多列布局**:CSS2.0引入了多列布局的概念,为复杂布局提供了可能。 CSS3.0作为CSS的最新版本,进一步增强...

Global site tag (gtag.js) - Google Analytics