4.02.03-白红宇

4.02.03

阅读量：6914 次

发布时间：2019-06-27

本文共 1634 字，大约阅读时间需要 5 分钟。

/*fixed定位：相对于浏览器窗口*/

position: fixed;

<html>

<head>

<style>

　　#d{

　　　　width: 200px;

　　　　height: 200px;

　　　　background: red;

　　　　}

　　#d1{

　　　　width: 50px;

　　　　height: 50px;

　　　　background: yellow;

　　　　/*相对定位:相对于元素本身应该在的位置移动*/

　　　　position: relative;

　　　　left: 20px;

　　　　bottom: 20px;

　　　　}

　　#d2{

　　　　width: 50px;

　　　　height: 50px;

　　　　background: pink;

　　　　}

　　#dd{

　　　　width: 200px;

　　　　height: 200px;

　　　　background: blue;

　　　　position: relative;

　　　　}

　　#dd1{

　　　　width: 50px;

　　　　height: 50px;

　　　　background: orange;

　　　　left: 20px;

　　　　bottom: 20px;

　　　　/*绝对定位：距离父类（有position样式的父类）...body*/

　　　　position: absolute;

　　　　left: 20px;top: 50px;

　　　　z-index: 100;

　　　　}

　　#dd2{

　　　　width: 50px;

　　　　height: 50px;

　　　　background: grey;

　　　　position: absolute;

　　　　left: 30px;

　　　　top: 60px;

　　　　z-index: 50;

　　　　}

</style>

</head>

<body>

　　sadassafasf

</div>

</div>

</body>

</html>

<html>

<head>

<title>无标题文档</title>

<style>

　　#d{

　　　　width: 200px;

　　　　height: 200px;

　　　　background: red;

　　　　/*fixed定位：相对于浏览器窗口*/

　　　　position: fixed;

　　　　left: 20px;

　　　　top: 50px;

　　　　}

</style>

</head>

<body>

</body>

</html>

转载于:https://www.cnblogs.com/boss-H/p/10645852.html

你可能感兴趣的文章

ASP.NET遇到HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容

查看>>

Android Gradle 自定义Task 详解

查看>>

数据结构之树、森林和二叉树的转换

查看>>

svn服务器配置以及自动同步到web服务器

查看>>

【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

SwipeBackActivity 的使用

1211Bug with integer literals in PLSQL

ABAP 面试问题及答案（一）：数据库更新及更改 SAP Standard (转)

查看>>

Top 10 JavaScript编辑器，你在用哪个？

一文教你看懂大数据的技术生态圈 Hadoop,hive,spark

查看>>

关于本地分区索引和索引组织表保证唯一性的限制

查看>>