`
xihuyu2000
  • 浏览: 32301 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

div固定不滚动

CSSHTML浏览器 
阅读更多

首先来看CSS代码

  1. #gg{ margin:0 auto; width:100%; position:fixed;z-index:99;} 

分析代码：

position属性主要是规定了DIV的定位，主要有以下几个属性

 

 

 

属性值 描述
absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

 

在上面的CSS代码中，我们使用了fixed属性，主要就是绝对定位，即定位到任何地方。

最终，我们可以将完整代码写为如下：

    

  1. 
<!DOCTYPE HTML> 

    2. 

  2. 
<html> 

    3. 

  3. 
<head> 

    4. 

  4. 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

    5. 

  5. 
<title>无标题文档</title> 

    6. 

  6. 
<style type="text/css"> 

    7. 

  7. 
#gg{margin:0 auto; width:100%; position:fixed;z-index:99; background:#000; color:#FFF} 

    8. 

  8. 
</style> 

    9. 

  9. 
</head> 

    10. 

  10. 
<body> 

    11. 

  11. 
<div id="gg">ssssssssssssssss</div> 

    12. 

  12. 
</body> 

    13. 

  13. 
</html> 

    14.

赶快试试吧！

 

 

 

也可以 position:fixed!important; position: absolute;

分享到：
| 忽视了项目前设计
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    固定div，滚动到顶部固定

    在网页设计中，"固定div，滚动到顶部固定"是一种常见的布局技巧，它可以使特定的div元素在页面滚动时始终保持在视口的可见位置，通常用于实现导航栏、侧边栏等元素的固定效果。这种效果可以提升用户体验，因为用户...

    滚动条下拉DIV固定在头部不动

    标题“滚动条下拉DIV固定在头部不动”指的是在网页设计中实现的一种特效，当用户滚动页面时，某个特定的DIV元素（例如一个导航栏）会保持在屏幕顶部，即使页面其他部分向下滚动，这个元素依然固定在视口的顶部。...

    网页局部div随滚动条置顶滚动

    不过，现代浏览器已经原生支持滚动事件，因此在不需要额外功能的情况下，使用纯JavaScript处理也是完全可行的。 总的来说，实现网页局部div随滚动条置顶滚动涉及HTML结构、CSS样式以及（可选的）JavaScript或jQuery...

    div不随滚动条的移动而改变位置

    标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位（fixed positioning）的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置，即使用户滚动页面，它也不会移动。这通常用于创建...

    div不随滚动条的滚动而动 可以兼容到IE6

    在网页设计中，"div不随滚动条的滚动而动"是一种常见的布局需求，通常用于创建固定定位元素，如顶部导航栏、侧边栏或浮动提示框等。这些元素需要在用户滚动页面时始终保持在屏幕的某个特定位置，提供持续的可访问性...

    jQuery实现将div的滚动条滚动到指定位置

    在这个例子中，我们创建了一个id为`scrollArea`的div，设置了固定的高度并使其可以滚动。当用户点击`#scrollTo`按钮时，会触发一个JavaScript函数，该函数计算当前滚动位置并加上目标偏移量，然后使用`animate()`...

    div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动

    在网页设计中，"div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动"是一种常见的布局技巧，主要用于创建侧边栏或者导航菜单。这种布局模式可以使元素在页面滚动时始终保持在用户视野的左侧，提供持续的导航...

    div模拟table滚动时表头固定，兼容ie6

    标题“div模拟table滚动时表头固定，兼容ie6”正是针对这一需求，描述了如何使用div元素来模拟表格的滚动，并确保在滚动过程中表头能够固定显示，同时实现列宽的自动适配，使得表头边框与表体边框对齐。 在传统的...

    div随滚动条上下滚动

    `，并指定`top`和`left`属性，该`div`就会固定在屏幕的相应位置，不随页面内容的滚动而移动。 2. **jQuery实现** jQuery提供了方便的DOM操作和事件处理，使得实现这个效果更简洁。可以监听窗口的滚动事件`$(window...

    div随着滚动条滚动，但是到了顶部，便不随着滚动了

    在网页设计中，有时我们需要让某个元素（如`&lt;div&gt;`）在页面滚动时保持固定的位置，或者达到特定位置后固定不动。这种效果常用于导航栏、侧边栏等元素上，可以提供更好的用户体验。例如，当用户滚动页面到一定程度时...

    HTML5_html表格表头固定不滚动内容滚动.rar

    HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将...

    滚动条滚动固定div

    滚动条滚动固定div是一种常见的网页布局技术，它在用户滚动页面时使特定div元素保持在视口的可见位置，提供了一种优秀的用户体验，特别是在内容丰富的网站或应用中。这种效果通常被称为“粘性导航”或“固定定位”。...

    div固定在屏幕顶部

    在网页设计中，"div固定在屏幕顶部"是一种常见的布局技术，主要用于创建固定导航栏、滚动条或者其他需要始终保持在视口顶部的元素。这个技术主要利用CSS（Cascading Style Sheets）中的`position`属性来实现，使得...

    不随滚动条滚动而滚动的浮动效果

    本篇文章将介绍如何实现不随滚动条滚动而滚动的浮动效果，也就是说，即使滚动条滚动，浮动元素也会固定在浏览器窗口的某个位置不变。 实现不随滚动条滚动而滚动的浮动效果需要使用CSS中的position属性。position...

    jQuery超强div固定位置布局特效插件

    **jQuery超强div固定位置布局特效插件** 在网页设计中，动态布局是提升用户体验的关键因素之一。这款基于jQuery的插件允许开发者实现div元素在页面滚动时保持在特定位置的效果，如固定侧边栏、顶部导航或者浮动按钮...

    DIV固定位置

    `DIV固定位置` 的概念指的是将一个 `div` 元素设置为固定定位（fixed positioning），使其在页面上保持在特定的位置，即使用户滚动页面，该 `div` 也不会移动。这种技术在创建导航栏、侧边栏或固定通知等元素时特别...

    js 实现div里面的内容滚动，并可以通过按钮控制

    1. **CSS布局**：首先，我们需要为包含内容的div设置一个固定的高度和宽度，同时将overflow属性设置为auto或scroll，这将开启div的滚动条功能。例如： ```css .scrollDiv { width: 300px; height: 200px; ...

    DIV无缝滚动

    在网页设计中，"DIV无缝滚动"是一种常见的视觉效果，用于展示内容时创造连续、平滑的滚动体验。这种效果通常结合HTML的`&lt;div&gt;`元素、JavaScript（JS）和jQuery库来实现，使得信息或者图片能够像一个无限循环的列表...

    滚动条到底部弹出div

    为了实现这个效果，我们首先需要一个固定在底部或者隐藏的`div`，然后通过JavaScript监听滚动事件。 在JavaScript中，我们可以使用`window.onscroll`事件来监听滚动条的变化。当滚动条达到底部时，我们可以检查`...

Magicbox
Global site tag (gtag.js) - Google Analytics