iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >css如何控制div固定不动
  • 154
分享到

css如何控制div固定不动

2024-04-02 19:04:59 154人浏览 安东尼
摘要

这篇文章主要讲解了“CSS如何控制div固定不动”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css如何控制div固定不动”吧!

这篇文章主要讲解了“CSS如何控制div固定不动”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css如何控制div固定不动”吧!

css控制div固定不动的方法:1、创建一个html示例文件;2、创建div;3、通过设置“position:fixed”属性实现固定不动即可。

css如何控制div固定不动

本文操作环境:windows7系统、HTML5&&css3版、DELL G3电脑

css怎么控制div固定不动?

可以通过position 属性规定元素的定位类型。

固定定位(position:fixed):

元素以相对浏览器窗口为基准进行定位的,无论怎样移动你的滑动条,它都会固定在相对于浏览器窗口的固定位置,另外要注意,它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top,bottom,left,right也是相对于浏览器窗口而言的。

说明

position属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h3.pos_abs {
position: fixed;
left: 100px;
top: 120px
}
p{
height: 100px;
background-color: paleGoldenrod;
}
p.p2{
margin-top:120px ;
}
</style>
</head>
<body style="height: 1200px;">
<h3 class="pos_abs">这是带有固定定位的标题</h3>
<p>相对于浏览器窗口来对元素进行定位</p>
<p class="p2">相对于浏览器窗口来对元素进行定位</p>
</body>
</html>

效果图:

css如何控制div固定不动

感谢各位的阅读,以上就是“css如何控制div固定不动”的内容了,经过本文的学习后,相信大家对css如何控制div固定不动这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: css如何控制div固定不动

本文链接: https://www.lsjlt.com/news/85750.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • css如何控制div固定不动
    这篇文章主要讲解了“css如何控制div固定不动”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css如何控制div固定不动”吧! ...
    99+
    2022-10-19
  • CSS怎么控制DIV永远固定在页面底部不随滚动而滚动
    本篇内容主要讲解“CSS怎么控制DIV永远固定在页面底部不随滚动而滚动”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS怎么控制DIV永远固定在页面底部不随滚...
    99+
    2022-10-19
  • css如何使div固定
    小编给大家分享一下css如何使div固定,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 在css中,可以利用position定位属性使div固定,该属性用于规定...
    99+
    2022-10-19
  • css如何固定底部不动
    这篇文章主要介绍css如何固定底部不动,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css固定底部不动的实现方法:首先创建一个HTML示例文件;然后设置一下css与div区域;最后通过“position:fixed;...
    99+
    2023-06-14
  • css如何实现内容固定不动
    今天小编给大家分享一下css如何实现内容固定不动的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。css实现内容固定不动的方法:...
    99+
    2023-07-05
  • CSS如何控制div大小
    小编给大家分享一下CSS如何控制div大小,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css3样式代码,经过时间完全兼容各大主...
    99+
    2022-10-19
  • html如何设置div固定位置不变
    这篇文章主要为大家展示了“html如何设置div固定位置不变”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html如何设置div固定位置不变”这篇文章吧。 ...
    99+
    2022-10-19
  • css如何控制div内的元素自动换行
    这篇文章将为大家详细讲解有关css如何控制div内的元素自动换行,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。控制div内的元素自动换行word-wrap: break-word;word-br...
    99+
    2023-06-26
  • css怎么将div层固定显示在页面底部不随滚动条滚动
    这篇文章主要介绍“css怎么将div层固定显示在页面底部不随滚动条滚动”,在日常操作中,相信很多人在css怎么将div层固定显示在页面底部不随滚动条滚动问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操...
    99+
    2022-10-19
  • CSS中DIV标签如何实现定位单元的控制
    这篇文章将为大家详细讲解有关CSS中DIV标签如何实现定位单元的控制,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。你对CSS中DIV标签的用法是否了解,DIV的起始标签和...
    99+
    2022-10-19
  • css如何控制div中元素居中
    这篇文章主要讲解了“css如何控制div中元素居中”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css如何控制div中元素居中”吧!div中行级元素居中代码如下:<div c...
    99+
    2023-07-04
  • teamviewer远程控制密码如何固定
    本文小编为大家详细介绍“teamviewer远程控制密码如何固定”,内容详细,步骤清晰,细节处理妥当,希望这篇“teamviewer远程控制密码如何固定”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 teamvi...
    99+
    2023-07-01
  • CSS在固定宽高的div内如何实现垂直居中
    这篇文章将为大家详细讲解有关CSS在固定宽高的div内如何实现垂直居中,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。需求案例案例是这样的,一个外层div,高宽是固定的,但...
    99+
    2022-10-19
  • css如何控制不换行
    这篇文章给大家分享的是有关css如何控制不换行的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css控制不换行的实现方法:首先创建一个HTML示例文件;然后在body中定义一些文本内容;最后通过将css中的whit...
    99+
    2023-06-14
  • css3元素如何固定不滚动
    本文小编为大家详细介绍“css3元素如何固定不滚动”,内容详细,步骤清晰,细节处理妥当,希望这篇“css3元素如何固定不滚动”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 ...
    99+
    2022-10-19
  • html5如何让头和尾固定不动
    这篇文章主要讲解了“html5如何让头和尾固定不动”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5如何让头和尾固定不动”吧! ...
    99+
    2022-10-19
  • DIV设置固定宽高出现文字不能自动换行的问题如何解决
    这篇文章主要介绍“DIV设置固定宽高出现文字不能自动换行的问题如何解决”,在日常操作中,相信很多人在DIV设置固定宽高出现文字不能自动换行的问题如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操...
    99+
    2022-10-19
  • 如何使用CSS控制动画行进
    这篇文章主要讲解了“如何使用CSS控制动画行进”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用CSS控制动画行进”吧!正文从这里开始。今天要介绍一种很...
    99+
    2022-10-19
  • 如何理解DIV定位单元中三大元素的控制
    如何理解DIV定位单元中三大元素的控制,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。你对DIV定位单元的控制方式是否熟悉,这里和大家分享一下,...
    99+
    2022-10-19
  • 如何借助CSS 更好的控制定时器
    今天小编给大家分享的是如何借助CSS 更好的控制定时器,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。 平时工作中很多场合...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作