开篇笔者刚刚结束淘宝的工作，现在加入了一家有青春活力的垂直电商公司，正对着阿里巴巴的西溪园区，最近一直在熟悉新的工作环境和规范，因此博客有好些时间没有更新了，在此抱歉！
在忙碌完公司的发布系统之后，逐渐接触到具体的业务。在这里主要介绍下关于css3草案的position：sticky属性的兼容。问题目前前端的h5有个需求，就是“当页面上的若干个标题被拖动到视口的顶部时，则显示一个被定位到视口的顶部
转载
2023-07-21 16:36:03
343阅读
介绍 相对定位 特点：元素移动时，占用原来的位置 position：relative 再通过 top：元素上边偏移 left： 元素左边偏移 right：元素右边偏移 bottom：元素下边偏移 绝对定位 特点：以实现定位的父元素进行定位。元素移动时，不在占用原来位置 position : abso ...
转载
2021-09-15 19:55:00
182阅读
2评论
前言 我们大多都了解绝对定位、相对定位、static 和 fixed 定位，而 sticky 定位常常会被忽略，本文来总结一下其相关使用方法。 正文 1、常见使用效果 我们滚动滚动条时，当 “ 我是粘性定位！” 的元素在触顶之后，他却没有继续向上滑动，而停留在可视区域内，这种实现效果就需要通过 sticky 定位来实现。 2、sticky 定位详解 sticky 英文字面意思是
转载
2023-10-01 09:58:09
685阅读
?一、简介css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。?二、使用场景比如导航或者Tab当我们下拉的时候，则会被隐藏，但是我们要实现随着下拉导航或Tab保持在浏览器窗口顶端。?三、注意事项父元素高度必须大于sticky元素的高度不设置父元素高度的时候，父元
原创
精选
2022-11-20 15:24:12
271阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na
转载
2022-12-21 10:24:29
82阅读
We can take advantage of sticky positioning to keep a section header at the top of the page while the user scrolls. This is useful for neat categorisa
转载
2018-06-17 11:49:00
118阅读
2评论
骨灰级清除浮动.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
*zoom:1; //兼容ie
}内联元素相连之间存在间隙问题原因:内联元素是当做字体来处理的，字体之间是有间
转载
2024-03-03 20:22:53
59阅读
CSS布局：sticky定位 stick定位 一如其名：它随“正常”文档流而动，直到规定位置，尔后“粘”在那里；或者，当它发现自己可以跟随“正常”文档流而脱离sticky位置时，就果断离开从而加入文档流。 ...
转载
2021-08-05 09:50:00
145阅读
2评论
有时我们会看到网站上的一些图片是渐变色的，这些图片有的是ui设计出来的，有的则是直接通过css3制作出来的。下面就讲一下css3实现渐变色的方法，以及在各个浏览器上的兼容性。 CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CS
转载
2023-07-26 20:13:25
84阅读
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整
转载
2023-09-02 21:44:19
112阅读
视区（视口）当浏览者查看一份网页文件时，通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域)。当我们调整视区大小时，UA 就有可能会改变文件上布局。当视区比文件所呈现的Canvas 区域还小时，UA 可能会提供一个卷轴的机制来让您一窥文件...
转载
2014-11-13 10:41:00
81阅读
2评论
osition:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bo
转载
2022-11-07 18:08:17
127阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>
原创
2022-12-21 10:24:27
108阅读
很久不写博文，之前的长时间不上都关闭了，但随着工作时间长越来越长，对知识的积累和总结还真的是很重要的。所以奉劝码农们每天都还是要抽出来一点时间总结点东西，以后对你受益匪浅！！今天还是变谈CSS3里的flex怎么处理兼容的flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了，虽然现在低版本浏览器不支持，可是对于移动来说兼容性不是问题，可是在安
原创
2016-06-27 23:00:56
2894阅读
# CSS3 Transform 在 iOS 中的兼容性问题分析
随着网页设计的发展，CSS3 提供了丰富的视觉效果和动画功能，其中包括 `transform` 属性。`transform` 允许我们对元素进行旋转、缩放、平移和倾斜等操作，这为网页设计师带来了无穷的创意空间。然而，在不同的设备和浏览器中对 CSS3 的支持程度各不相同，特别是在 iOS 设备上的兼容性问题，可能会影响最终用户的体
原创
2024-09-18 05:46:30
334阅读
一、CSS 定位概述定位概念 - 普通流定位 - 页面中的块级元素框从上到下一个接一个地排列 - 每一个块级元素都会出现在一个新行中 - 内联元素将在一行中从左到右排列水平布置 - 浮动 - 相对定位 - 绝对定位 -
原创
2016-03-22 18:42:20
1035阅读
# iOS Sticky 定位兼容问题的解决方案
在 iOS 开发中，`sticky` 定位是一种常用的布局方式，它可以使元素在滚动时保持在 viewport 中的特定位置。然而，由于不同设备的屏幕尺寸、浏览器引擎的差异等因素，`sticky` 定位可能在某些情况下会出现兼容性问题。接下来，我将为刚入行的小白开发者详细讲解如何实现和调试 iOS 中的 `sticky` 定位，同时兼顾兼容性问题。
原创
2024-08-30 04:49:14
223阅读
一、CSS 定位概述定位概述 - 定位: 定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置 - 普通流定位 - 浮动定位 - 相对定位 - 绝对定位普通流定位 - 页面中的块级元素框从上到下一个接一个地排列 - 每一个块级
原创
2016-03-22 17:16:31
687阅读
一.position属性定位网页元素 1.static ：默认值，没有定位。按照标准文档流的方式提现出来 2.relative：相对定位，相对于自身元素原来的位置进行定位 <style type="text/css"> .div01{ position: relative; top: -20px;
原创
2021-08-31 16:21:44
163阅读
不得不爱过渡(CSS3)案例过渡(CSS3)过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画： 是从一个状态 渐渐的过渡到另外一个状态帧动画：通过一帧一帧的画面按照固定顺序和速度播放。
原创
2020-07-15 10:21:01
2202阅读
