div固定浮动某位置

效果图,图片始终处于这个位置。

代码

<style>
#NavTop {
width: 140px;/*图片盒子的宽度 右移*/
height: 250px;
margin-top: 50px;
position: fixed;
right: 0px;
top: 200px; /*固定位置,右浮动,距上200px*/
}
#NavTop #NavCon {
width: 140px;
height: 250px;
background: url(‘images/d.png‘) repeat-y;
position: relative;

}
#NavTop #NavCon img.banner {
position: absolute;
left: 25px;
top: -40px;
}

</style>

<div id="NavTop">
  <div id="NavCon">
    <img width="140" height="130" src="../../IMAGE/2G-4G.jpg" />
  </div>
</div>

原文地址:https://www.cnblogs.com/zylbky/p/11392679.html

时间: 2024-10-04 13:56:14

div固定浮动某位置的相关文章

返回顶部的功能 div固定在页面位置不变

1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用呢?反正我用了感觉没啥用. 2.还有一种就是JS控制了.我写的是随着滚动滚动 ,计算div的绝对与可视页面的位置不变. $(window.parent).on('scroll',function(){ $(返回顶部所在div选择器).css('top',parent.document.documen

jQuery&amp;CSS 顶部和底部固定浮动工具栏 兼容IE6

现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方.这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到. 其实这样的布局方式很早就有,只是没有那么个契机推广开吧.做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已. 首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行. HTML

div+css浮动的解决方法

如何清楚浮动(一) 已知一个大的div容器,这个容器包含了两个子div容器,然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器),清楚浮动的div容器设置css样式为clear:both,此时,大的div标签的内部(左右两边/*css5*/)浮动就清除了. 如果有一个大的div容器<div class="divcss5"> </div> ,这个大的div包含了一个子div容器<div class="clear&qu

CSS position:fixed 实现html元素固定于某位置

本文章通过实例向大家讲解position:fixed 实现html元素固定于某位置.实例中div将固定于网页右下角,主要使用到css position:fixed 属性,需要的码农可以参考一下. CSS实现div固定于网页右下角实例代码:将一个元素固定于网页右下角的效果使用非常频繁,比如返回顶部的按钮,或者说是信息提示框之类的,下面就介绍一下如何使用CSS实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <title>C

解决div设置浮动,高度消失

给包围 浮动的层 加清除浮动样式,样式要兼容的用下面的代码.clearfix {*zoom:1; clear:both;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;zoom: 1;} 一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元

html 7 圣诞树 浮动 相对位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

内容高度小于窗口高度时版权div固定在底部

<!doctype html><html><head><meta charset="utf-8"><title>文档内容高度小于窗口高度时底部版权始终在底部-懒人建站</title><meta name="description" content="网站建设中经常遇到文档内容高度小于窗口高度时底部版权始终在底部的问题,纯css不太好解决这个问题,这里使用js代码来对检测文档高度和

原生js实现三个div层动态交换位置

html代码部分 <!--触发变换按钮--> <input type="button" onclick="startMove()" value="点击"/> <!--主体部分--> <div class="localbox"> <div id="b1" class="block1"></div> <div id

将div固定在页面某处 兼容ie6

一.样式: ? 1 2 3 4 5 6 7 8 <style> body,div{ margin:0; padding:0} .wrap{width:1000px; margin:0 auto} .info{width:1000px; height:40px;background:#f2f2f2; text-align:center; font:normal 14px/40px 'Microsoft YaHei'; color:#333} *html{background-image:url(