html如何让其中一个div浮在另一个div上面

html如何让其中一个div浮在另一个div上面,第1张

设置div样式 z-index:auto

auto可定义为一个值(整数数字),越大代表越置前,如可定义为: z-index:999。

前提是div是定位元素代码实例如下:

1、<html>

2、 <body>

3、<style type="text/css">

3、.div1{ width: 200px height: 100px background: red float: left }

5、.div2{ width: 300px height: 350px background: yellow }

6、</style>

7、 <div class="div1"></div>

8、<div class="div2"></div>

9、 </body>

10、</html>

扩展资料

一个网页对应多个HTML文件超文本标记语言文件以.htm(磁盘 *** 作系统DOS限制的外语缩写)为扩展名或.html(外语缩写)为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件,只用修改文件后缀即可。

标准的超文本标记语言文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:<br/>),即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

参考资料

百度百科-html

下载jquery.pin,然后解压后在该文件夹目录下新建一个html文件。

编辑这个网页,在里面引入jquery.pin。

具体代码如下:<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="jquery.pin.js"></script>

让图像div碰到屏幕顶后自动随着滚动而悬浮在顶部。

做好后随着滚动而滚动了。

引入了文件后。

<script>

$(".pinned").pin({containerSelector: ".b", minWidth: 940}) </script>

(这段代码里面的.pinned是要悬浮的div,b是这个悬浮div悬浮的范围。)

使用Dreamweaver软件,打开一个已经编辑完成的html页面。

然后打开折叠的body标签,在标签的末尾添加一个DIV

在DIV里面加入一个img标签,src指向images文件夹中的一张图片

这时的div并没有相应的css样式,只处在整个网页的左下角

接下来我们就需要将给其添加一定的css样式,为了简便起见,我的css样式就写在页面的body标签里面了。

首先我们要让这个DIV的position样式为fixed,意为相对于屏幕定位。然后将top设为20pxright也设为20px这样我们的div就固定在相对距离屏幕上方和右方分别20个像素的地方


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6127932.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存