css relative
<style>
div{
width: 300px;
height: 50px;
background: #eee;
margin-top:20px;
}
</style>
<body>
<div></div>
<div style="position:relative; margin-top:-30px; background: red;"></div>
<div></div>
</body>
<style>
div{
width: 300px;
height: 50px;
background: #eee;
margin-top:20px;
}
</style>
<body>
<div></div>
<div style="position:relative; top:-30px; background: red;"></div>
<div></div>
</body>
<style>
div{
width: 300px;
height: 50px;
background: #eee;
margin-top:20px;
}
</style>
<body>
<div></div>
<div style="position:relative; top:-30px; bottom:30px; background: red;"></div>
<div></div>
</body>
css relative的更多相关文章
- css relative设置top为百分比值
前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现 <!D ...
- CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭
前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...
- CSS系列:CSS中盒子的浮动与定位
1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...
- absolute和relative的几个Demo
这些例子最好通过FireFox结合FireBug调试查看 1.absolute让元素inline-block化 <!DOCTYPE html> <html xmlns="h ...
- Css定位-定位
在CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式.他们的基 本介绍如下. static默认定位方式 relative相对定位, ...
- 简明的例子讲解position:relative、float、overflow:hidden和inline-block
标签(空格分隔): css relative float 我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block. 下 ...
- RPO(Relative Path Overwrite)
Conception(Relative vs Absolute) Abosolute Path: "/etc/hosts"(in Linux), "C:\Windows\ ...
- [转]【Angular4】基础(二):创建组件 Component
本文转自:https://blog.csdn.net/u013451157/article/details/79445138 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...
- position属性详解
内容: 1.position属性介绍 2.position属性分类 3.relative相对定位 4.absolute绝对定位 5.relative和absolute联合使用进行定位 6.fixed固 ...
随机推荐
- docker 部署disconf 以及将其做成镜像
1.需要一台服务器(阿里云,腾讯云.实体服务器都行,本次是以实体服务器为依照做的) 2.安装docker https://www.cnblogs.com/shijunjie/p/10436293. ...
- 使用 Ninject
在[ASP.NET MVC 小牛之路]系列上一篇文章(依赖注入(DI)和Ninject)的末尾提到了在ASP.NET MVC中使用Ninject要做的两件事情,续这篇文章之后,本文将用一个实际的示例来 ...
- React.js 小书 Lesson13 - 渲染列表数据
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson13 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...
- JS数组遍历方法
常用数组遍历方法: 1.原始for循环 var a = [1,2,3]; for(var i=0;i<a.length;i++){ console.log(a[i]); //结果依次为1,2,3 ...
- 05.while循环的练习
练习1: namespace _05.while循环练习01 { class Program { static void Main(string[] args) { //打印100次"努力学 ...
- (三)HTML中的列表标签、框架集及表单标签
一.HTML的列表标签 在网页中,经常可以看到,有的内容排列如同word里面的项目编号,这就是HTML的无序排列和有序排列起到的作用.. HTML之无序排列:<ul></ul> ...
- FontSize sp 和 dp 的区别
dp不会随着“设置->显示->字体大小”的改变而改变,sp会. sp会随着configeration的配置来scale, dp不会. 所以,什么时候用sp, 什么时候用dp需要斟酌.
- PAT 1036 Boys vs Girls
#include <cstdio> #include <iostream> #include <cstdlib> #include <algorithm> ...
- laravel vue.js的使用
安装cors 地址:https://github.com/barryvdh/laravel-cors 在Kernel文件中加上 protected $middleware = [ \Barryv ...
- vue打包(npm run build)时错误记录
vue项目打包时,报错如下: 问题分析:semver.js报错,版本不正确,解决办法,打包时忽略版本检查 解决办法: