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实现多重边框的方法总结
May 31 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 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
pw的一个放后门的方法分析
2007/10/08 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
laravel5.6实现数值转换
2019/10/23 PHP
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
JS中数组重排序方法
2016/11/11 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
动态创建类实例代码
2009/10/07 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python pandas用法最全整理
2019/08/04 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
应届生会计求职信
2013/11/11 职场文书
关爱残疾人标语
2014/06/25 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
大学新生入学感想
2015/08/07 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
Python经常使用的一些内置函数
2022/04/11 Python