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 09 HTML / CSS
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
php文件上传的两种实现方法
2016/04/04 PHP
php数据访问之增删改查操作
2016/05/09 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
基于python实现操作git过程代码解析
2020/07/27 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
食堂个人先进事迹
2014/01/22 职场文书
初中美术教学反思
2014/01/29 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
网吧温馨提示
2015/07/17 职场文书