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的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
HTTP中的Content-type详解
Jan 18 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编程语言开发动态WAP页面
2006/10/09 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
告诉大家什么是JSON
2008/06/10 Javascript
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Django学习笔记之Class-Based-View
2017/02/15 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python向excel中写入数据的方法
2019/05/05 Python
django rest framework 自定义返回方式
2020/07/12 Python
flask项目集成swagger的方法
2020/12/09 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
小学教师评语大全
2014/04/23 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
Pillow图像处理库安装及使用
2022/04/12 Python
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python