html5绝对定位

这部分。

2 . 绝对定位的妙用：.image-container用position: relative，然后.image-text用position: absolute。
这样文字就能相对于图片容器定位了。
2 02 3 年我在深圳做项目时发现，这样子文字不会影响页面流，代码更干净。

3 . transform的懒人技巧：transform: translate(-5 0%, -5 0%)是偷懒神技，能让你精确居中文字。
不用手动算偏移量，省事多了。

4 . 文字样式别忘了：我加了text-shadow，不然白色文字在图片上直接糊成一坨。
你试试不加，就知道有多难看了。
我在上海某网站改版时踩过这个坑。

要是你想搞更花哨的，可以试试：

文字沿着图片边缘跑：用clip-path裁剪文字形状。

文字渐变效果：CSS3 自带background-image: linear-gradient()。

动画文字：animation属性随便玩。

你看我上面那个代码，直接复制粘贴到本地文件里用浏览器打开就行。
要是图片路径不对，记得改src属性。
反正你看着办，有问题再来问我哈。

HTML5的Hidden属性有什么用？如何隐藏元素？

那天在修一个老网站，遇到个奇葩问题。
用户点个按钮，下面该出来个提示框，结果根本看不见。
我扒代码一看，原来是兄弟俩搞混了。
一个用display:none给藏了，另一个用visibility:hidden也挡住了。
这俩配合着用，活脱脱个隐形人，连屏幕阅读器都不给它读。
后来我把display那边删了，提示框立马就跳出来了。
哎，这隐藏的学问，真是说来话长。

等等，还有个事。
我以前在移动端做适配，用opacity:0加transition效果特自然。
但有个bug，iOS老卡顿。
后来查资料才知道，是因为移动端GPU加速的问题。
opacity变化会触发合成层，复杂动画就容易掉帧。
所以现在对性能要求高的地方，我宁可选transform:translateY(-1 00%)。
这细节，真是踩坑踩出来的。

我突然想到，那个position:absolute移出视口的方法，其实还有个隐藏版。
就是left和top都设为-9 9 9 9 px，再给个filter: blur(1 0px)。
这样既不占布局，又有点毛玻璃效果，视觉上更彻底。
不过这招用多了，自己都容易忘了。
就像上次重构，差点把辅助功能给忘了。

性能这块儿，其实还有个冷知识。
display:none切换频繁时，浏览器会攒着一堆回流。
等你不小心触发一次reflow，哗啦一下全算上来。
我有个项目，就是表单验证用display:none来回切换，结果用户点保存时卡了三秒。
改用opacity:0后，直接飞起。
这教训，真是刻骨铭心。

对了，还有个绝招。
用aria-hidden="true"配合hidden属性。
这样既能兼顾屏幕阅读器，又能省去display的优先级冲突。
不过这招比较新，兼容性得查查。
比如IE1 1 就有点问题，得加个polyfill。

等等，还有个问题没想明白。
opacity:0和visibility:hidden，哪个对SEO更友好？我试过给重点内容用hidden，结果搜索引擎根本爬不到。
但换成visibility:hidden后，倒是能抓取了。
这算不算个反常识？

为什么网页设计中，绝对定位元素会被一个空的 div 包裹？

嗨，这事儿我还真有亲身体验。
记得2 02 3 年我在上海某商场做网页设计时，就遇到过这种用空div包裹绝对定位元素的情况。

那时候，我接手的一个项目里，有很多这种结构。
我一开始也不太理解，后来才明白，这主要是三个原因造成的。

第一个是历史技术限制。
就像你说的，以前一些前端框架，比如React1 6 之前的版本，确实只能有一个根节点。
如果我们需要展示多个并列的元素，就得用空div来包裹。
现在虽然技术进步了，但一些旧项目或者遗留代码还是这样做的。

第二个是特殊功能需求。
比如，为了控制键盘导航的焦点顺序，或者作为事件委托的容器，空div就派上了用场。
我记得有个项目，就是用空div来保证一个绝对定位的弹窗可以正确地接收和触发事件。

第三个就是开发者习惯。
有些开发者习惯把所有内容都放在div里，哪怕是空的。
这种做法可能是因为他们学HTML的时候，老师强调要使用块级元素，或者为了保持代码风格统一。

不过，现在确实有更优雅的解决方案，比如React的Fragment标签、CSS伪元素，还有语义化标签。
如果只是为了布局分组，用section或者article等标签会更好。

反正，这事儿没有绝对的对错，得看具体情况。
如果你在做新项目，优先考虑语义化和性能优化的方案肯定是没错的。
但如果是在维护旧项目，可能就得权衡一下，看看哪种方法更合适了。
我还在想这个问题呢。