`

div定位在浏览器窗口的固定位置的方法

    博客分类:
  • CSS
阅读更多

在很多网站上面我们可以看到浏览器的两边都有广告,这些广告无论我们怎么滚动浏览器的滚动条它都出现在浏览器窗口的固定位置,也就是跟着滚动条一起滚动。对于这种效果只需要在div的样式中设置position为fixed即可。但是这个fixed只对当前比较新的浏览器才支持,对于一些老版本的浏览器这种方法是行不通的。因为老版本浏览器压根不认识fixed,比如说IE6,IE6在国内可是还占着相当大的比重,不能忽视。所以可以用以下的方法解决:

.focus {
	Z-INDEX: 300;  POSITION: fixed; WIDTH: 255px; BOTTOM: 0px; PADDING-RIGHT: 8px;  FLOAT: right; OVERFLOW: hidden;  RIGHT: 0px; 
}
* HTML .focus {
	POSITION: absolute; ; TOP: expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight)
}

 

在第一个样式中,bottom和right都设为0,表示把div固定在浏览器的右下方。重要在第二个样式,这样就可以兼容所有的浏览器了。

 

http://www.buyonstore.com

分享到:
评论

相关推荐

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

    将其设置为`fixed`,这样元素就会相对于浏览器窗口定位,而不是相对于其父元素。同时,为了保持在屏幕左侧,可以设置`left: 0;`。 ```css div { position: fixed; left: 0; } ``` 2. **固定高度与宽度**:为了让...

    div浮于页面固定位置、展开与隐藏、锚点定位

    当设置`position`为`fixed`时,div元素将相对于浏览器窗口保持固定位置,即使页面滚动也不会改变其位置。例如: ```css .fixed-div { position: fixed; top: 20px; /* 设置距离顶部的距离 */ right: 20px; /* ...

    DIV固定位置

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

    固定div,滚动到顶部固定

    当设置`position`为`fixed`时,元素会相对于浏览器窗口定位,即使页面滚动,它也会保持在屏幕的固定位置。然而,固定定位在滚动到顶部时可能需要特别处理,以确保元素在达到特定位置时切换到固定状态。 在...

    JS简单实现DIV相对于浏览器固定位置不变的方法

    本实例将通过JavaScript实现一个`<div>`元素相对于浏览器窗口固定位置不变的效果。 首先,我们要明白在HTML和CSS中,`position`属性用于定义元素的位置。当设置为`absolute`时,元素会相对于最近的非静态定位祖先...

    CCS固定位置,DIV固定位置

    在本主题“CCS固定位置,DIV固定位置”中,我们将深入探讨如何使用CSS来实现元素在页面上的固定定位,特别是关于`div`元素的固定定位。 首先,理解CSS的定位模式是关键。有四种基本的定位方式:正常流(Normal Flow...

    在页面固定div位置实示例

    在网页设计中,固定div(固定定位)是一种常见的布局技巧,它使得div元素在页面滚动时仍然保持在屏幕的特定位置,例如顶部导航、侧边栏等。本示例将探讨两种实现页面固定div位置的方法,并进行比较。 方法一:CSS ...

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

    2. **计算div位置**:当页面滚动时,插件会计算目标div相对于浏览器窗口的位置。 3. **设置定位样式**:如果div的位置超出预设阈值,插件将修改div的CSS属性,例如将其position设置为fixed,top或left设置为相对于...

    div固定在屏幕顶部

    当我们将一个div的`position`属性设置为`fixed`时,该元素会相对于浏览器窗口定位,而不是相对于其正常文档流的位置。 下面是一个基本的实现步骤: 1. 首先,创建一个HTML结构,包含一个div元素,这个div将作为...

    div弹出层 定位问题的 处理

    `使`div`始终相对于浏览器窗口定位,即使滚动页面也不会改变其位置。这对于创建始终可见的弹出层或悬浮菜单非常有用。 3. **居中对齐**:让`div`弹出层居中,可以采用以下几种方式: - 使用负边距:通过计算`div`...

    DIV弹出层+定位

    此外,为了确保弹出层在页面滚动时仍然保持在固定位置,可能需要使用`position:fixed`,这样它就会相对于浏览器窗口定位。但在这个描述中,弹出层的定位方式是固定的,所以`position:absolute`应该足够满足需求。 ...

    CSS+DIV固定底部的漂浮导航条(多浏览器兼容)

    在这个场景中,我们将使用`fixed`,因为它会将元素相对于浏览器窗口进行定位,使其在滚动时保持在屏幕的特定位置。 HTML结构基础: ```html <div class="footer-nav"> <li><a href="#">首页</a></li> <li><a ...

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

    在这里,我们关注的是 `fixed` 值,它会使元素相对于浏览器窗口定位,而不是相对于其正常文档流或最近的已定位祖先元素。 以下是一个简单的例子,展示了如何创建一个固定定位的 `div`: ```html <!DOCTYPE html> ...

    div模式窗口-div模式窗口

    对于创建浮动窗口或固定定位的元素,`absolute`和`fixed`尤为常用。 - `width`和`height`: 定义`div`的尺寸。 - `margin`和`padding`: 控制元素周围的空白空间。 - `border`和`background`: 定义边框和背景,增强...

    jQuery插件实现DIV浮动在页面固定位置中

    当设置一个元素的`position`属性为`fixed`时,该元素将相对于浏览器窗口定位,即使页面其他部分滚动,它也会保持在屏幕上的同一位置。然而,仅用CSS可能无法满足所有需求,特别是在响应式设计或动态内容加载时,此时...

    悬浮固定DIV悬浮固定DIV

    标题中的“悬浮固定DIV”指的是在网页设计中实现一个Div元素始终保持在浏览器窗口的某个位置,即使用户滚动页面也不会离开视线。这通常通过CSS和JavaScript来实现。 描述中提到的"悬浮固定DIV_demo"是一个示例,...

    div固定在某一位置(并png图片透明显示)

    `属性可以使元素相对于浏览器窗口定位,而不是相对于其正常文档流或父元素。这意味着无论用户如何滚动页面,该元素都将保持在屏幕的某个固定位置。例如,常见的应用是页眉、侧边栏或者底部版权信息。要实现这个效果...

    div做的弹出窗口

    可能还涉及了定位技术,如绝对定位或固定定位,以使弹窗居中或相对于某个元素对齐。 3. JavaScript交互:除了拖动功能外,还可能包括显示和隐藏弹窗的逻辑,这通常通过添加或删除CSS类来实现。此外,可能还有关闭...

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    当浮动层div与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度是一致的,所以我们就用这个进行判断。那如何获得页面上元素距离页面的垂直距离呢? 这里则是使用javaScript库实现。

Global site tag (gtag.js) - Google Analytics