css position fixed 左右双定位的实现代码


Posted in HTML / CSS onApril 29, 2021

CSS Position(定位)
position 属性指定了元素的定位类型。

position 属性的五个值:

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 1400px;
				height: 1500px;
				margin: 0 auto;
			}
			.box1{
				border: 1px solid #000000;
				height: 200px;
				width: 200px;
			    display: inline-block;
				position: fixed;
		
			}
			.box02{
				    border: 1px solid #006400;
				    height: 1500px;
				    width: 800px;
				    display: inline-block;
				    margin: 0 20px;
				    margin-left: 250px;
			}
			.box03{
				border: 1px solid #006400;
				height: 200px;
				width: 200px;
				display: inline-block;
			    position: fixed;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">123</div>
			<div class="box02">456</div>
			<div class="box03">789</div>
		</div>
	</body>
</html>

css position fixed 左右双定位的实现代码

到此这篇关于css position fixed 左右双定位的实现代码的文章就介绍到这了,更多相关css position fixed定位内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
CSS3实现的侧滑菜单
CSS完成视差滚动效果
Html5通过数据流方式播放视频的实现
Apr 27 #HTML / CSS
CSS3实现的3D隧道效果
用CSS3画一个爱心
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
You might like
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python使用mysql的两种使用方式
2018/03/07 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
详解如何减少python内存的消耗
2019/08/09 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Python matplotlib实时画图案例
2020/04/23 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
学生自我鉴定模板
2013/12/30 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
道歉情书大全
2015/05/12 职场文书