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哪些新特性值得称赞
Mar 02 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 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
3种平台下安装php4经验点滴
2006/10/09 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
python实现图书管理系统
2018/03/12 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
python 利用toapi库自动生成api
2020/10/19 Python
python urllib和urllib3知识点总结
2021/02/08 Python
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
经典c++面试题三
2015/07/08 面试题
临床医学系毕业生推荐信
2013/11/09 职场文书
读群众路线心得体会
2014/03/07 职场文书
数控机床专业自荐信
2014/05/19 职场文书
教师听课评语大全
2014/12/31 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
导游词之长城八达岭
2019/09/24 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
angular异步验证器防抖实例详解
2022/03/31 Javascript