<commit_before>---
date: 2017-3-8
layout: post
title: div绝对定位以及消除溢出内容
thread: 9
categories: Code
tags: [CSS]
excerpt: .
---

番茄计时器计时功能已经差不多实现了，但我在做**按比例填充时钟背景色(就是类似沙漏的那种效果)**时遇到了很大的问题。   
###问题来自两方面：
1.不知道如何实现根据走过的时间换算成沙漏的填充比例。

2.不知道怎么实现变化的填充色。
### 解决方法：
1.通过实时获取计时走过的时间，换算出剩余时间占总设置时间的比例，将其设置为.bg的高度。

2.在class为timber的div下创建一个class为bg的span/div。
将其定位元素position设置为absolute,并将class为.timber的div position设为relative。
因为position为absolute的元素是根据其定位元素不为static的父元素定位的。

然后利用绝对定位元素的属性bottom,left,right，z-index来调整子元素，根据预先设置好背景颜色并利用设置父元素overflow:hidden这个特性将父元素外的背景色隐藏，这样就实现了沙漏的效果。

**父元素css如下:**

    .timber {
       position:relative;
       overflow:hidden;
       }
       

**子元素css如下:**<commit_msg>Update 2017-03-07-third.md<commit_after>---
date: 2017-3-8
layout: post
title: div绝对定位以及消除溢出内容
thread: 9
categories: Code
tags: [CSS]
excerpt: .
---

番茄计时器计时功能已经差不多实现了，但我在做**按比例填充时钟背景色(就是类似沙漏的那种效果)**时遇到了很大的问题。   
### 问题来自两方面：
1.不知道如何实现根据走过的时间换算成沙漏的填充比例。

2.不知道怎么实现变化的填充色。
### 解决方法：
1.通过实时获取计时走过的时间，换算出剩余时间占总设置时间的比例，将其设置为.bg的高度。

2.在class为timber的div下创建一个class为bg的span/div。
将其定位元素position设置为absolute,并将class为.timber的div position设为relative。
因为position为absolute的元素是根据其定位元素不为static的父元素定位的。

然后利用绝对定位元素的属性bottom,left,right，z-index来调整子元素，根据预先设置好背景颜色并利用设置父元素overflow:hidden这个特性将父元素外的背景色隐藏，这样就实现了沙漏的效果。

**父元素css如下:**

    .timber {
       position:relative;
       overflow:hidden;
       }
       

**子元素css如下:**
{'fraction_non_alphanumeric': 0.11461318051575932, 'fraction_numerical': 0.02148997134670487, 'mean_word_length': 6.091370558375634, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4408857', 'n_tokens_mistral': 905, 'n_tokens_neox': 1006, 'n_words': 60}