我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置,无论如何滚动滚动条,位置不变,就例如经常看到的弹出广告。方法一般是使用js控制,或者使用css。这里我写的是css的控制方法。在IE7以上版本及firefox、opera、safari里,都支持css属性"position:fixed",它的作用就是将元素相对于窗口固定位置。代码如下#ads{
    position:fixed;            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-04-08 21:35:03
                            
                                57阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            又到周末了,又结束了一周的课程了,表示昨前天开始老师布置家庭作业开始写页面了,前天的还好,12点之前搞定,昨天的熬到2点,表示大神不要笑哈,毕竟能力有限,第二天看了老师的讲解,才发现做了非常多的无用功,好了,闲聊就到这里吧,下面我分享下这周老师讲到的一些内容,以下都是自己的理解哈,仅供参考:CSS盒子定位:什么是盒子定位呢,顾名思义,就是元素盒子(以下主要以块级盒讲解)在页面中的位置,定位就是确定            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-03-06 21:33:55
                            
                                40阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            绝对固定        .footer {            z-index: 9999;            position: fixed;            bottom: 0px;            width: 100%;        }            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-08-07 09:55:35
                            
                                265阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            body div.tableContainer { height: auto; padding: 0; width: 740px}/* Reset overflow value to hidden for all...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2010-03-26 15:43:00
                            
                                699阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            绝对固定        .footer {            z-index: 9999;            position: fixed;            bottom: 0px;            width: 100%;        }            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-03-01 15:21:05
                            
                                195阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            1: background-color  设置背景颜色2:background-image来设置背景图片   语法:background-image:url(相对路径);   可以同时为一个元素指定背景颜色和背景图片,   这样背景颜色将会作为背景图片的底色   图片在元素中的位置                
                
         
            
            
            
            # iOS CSS 底部固定实现方法
## 简介
在移动应用开发中,经常会遇到需要将某个元素固定在页面底部的需求,比如底部导航栏或悬浮按钮等。本文将介绍在 iOS 中使用 CSS 实现底部固定的方法,帮助刚入行的开发者快速掌握这一技术。
## 流程
下面是实现 iOS CSS 底部固定的整体流程,按照以下步骤进行操作即可:
```mermaid
journey
    title iOS            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-10-10 11:22:48
                            
                                240阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            CSS固定菜单栏- 当鼠标向下滑动时,位于最上面的导航一直不动,而内容发生变化<style>
    * {
      padding: 0px;
      margin: 0px;
    }
    .navbar {
      width: 100%;
      background: black;
      /* 固定住导航条 */
      position:            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-01-15 08:43:04
                            
                                196阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            CSS 固定定位 相对于浏览器窗口。当容器的position属性值为fixed时,这个容器即被固定定位了。 通过设置固定定位,将容器脱离了普通流,因此被固定定位的容器不会随着滚动条的拖动而变化位置。在视野中,固定定位的容器的位置是不会改变的。但是在IE6中不正常。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                            精选
                                                        
                            2009-11-11 09:52:57
                            
                                3507阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            步骤 1 : 左右固定,中间自适应的布局 <style> .left{ width:200px; float:left; background-color:pink } .right{ width:200px; float:right; background-color:pink } .center            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2020-07-15 20:03:00
                            
                                138阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            步骤 1 : 左侧固定,右边自动占满 <style> .left{ width:200px; float:left; background-color:pink } .right{ overflow:hidden; background-color:lightskyblue; } </style>            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2020-07-15 09:36:00
                            
                                315阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            http://apps.hi.baidu.com/share/detail/30748047<style>.tbl {table-layout:fixed;}</style><table class="tbl" border="1" width="80"><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2012-02-10 11:25:00
                            
                                852阅读
                            
                                                                             
                 
                
                             
         
            
            
            
                         css中的几种定位详解  css中定位的熟练使用,对于页面的美化和排版有着重要的意义。    首先我们来了解一下css中主要有哪几种,这些定位主要分为静态定位,相对定位,绝对定位,固定定位这四种。  一.静态定位(static)   一般的标签元素不加任何定位属性都属于静态定位,在页面的最底层属于标准流。在默认情况下,元素没有指定position属性时,这个元素            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-01-19 23:53:16
                            
                                55阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            有的时候我们需要将一个div固定在一个屏幕的指定位置,如在使用loading状态条的时候,或者显示在线用户数的时候。需要的是将div显示在网页的中间,顶端或者左下端,并且无论滚动条如何拉动,这个div将始终保持在相同的相对位置。这些要求用css是很可以容易实现的,只需要用到position:fixed这个描述参数即可。和position: fixed;平行的描述语言有 position: abso            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-09-25 15:59:52
                            
                                167阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            fixed="right"css 弹窗的标题字体大小.el-dialog__title {  font-size: 18px}.el-ue!important;}.el-button{  border: 1...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-04-21 19:55:49
                            
                                444阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            ```
max-width: 200px;
display: block;
word-break: break-all;
```            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-08-05 16:21:39
                            
                                2626阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            引用内容 引用内容 <!doctype html public "-//w3c//dtd html 4.0 strict//en"><html><head><style>body { background-color: #F0F0F0 ; font: 11px "verdana","Arial";            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-07-23 10:09:26
                            
                                315阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            固定定位(HTML、CSS)<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    e>    <style>        .dj {            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-10-20 10:17:47
                            
                                286阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            防疫不防学,逆战2020,中国加油! 我们在学习CSS中的定位是很重要的一部分,使用它能够让我们对页面的布局设计进行的更加得心应手,下面我将对五种定位进行详细的介绍。 常用定位分为:1.静态定位 static   2.相对定位 relative   3.绝对定位 absolute  4.固定定位 fixed  5.粘性            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-10-01 10:54:53
                            
                                318阅读
                            
                                                                             
                 
                
                                
                    