Css - 为每个div添加top属性，top属性是多少？

Question

我有10个div，每个都有绝对位置，宽度：100px和高度100px。在这种情况下，我们只会看到一个div，因为div的其余部分相互重叠。

所以我想问一下，如果我可以在纯CSS中选择那些div，并添加每一个顶级属性，它应该是这样的：

 Collecting chainer==1.5.1
  Using cached chainer-1.5.1.tar.gz

Exception:
Traceback (most recent call last):
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\pip\basecommand.py", line 211, in main
    status = self.run(options, args)
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\pip\commands\install.py", line 305, in run
    wb.build(autobuilding=True)
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\pip\wheel.py", line 705, in build
    self.requirement_set.prepare_files(self.finder)
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\pip\req\req_set.py", line 334, in prepare_files
    functools.partial(self._prepare_file, finder))
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\pip\req\req_set.py", line 321, in _walk_req_to_install
    more_reqs = handler(req_to_install)
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\pip\req\req_set.py", line 505, in _prepare_file
    abstract_dist.prep_for_dist()
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\pip\req\req_set.py", line 123, in prep_for_dist
    self.req_to_install.run_egg_info()
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\pip\req\req_install.py", line 376, in run_egg_info
    self.setup_py, self.name,
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\pip\req\req_install.py", line 347, in setup_py
    import setuptools  # noqa
  File "<frozen importlib._bootstrap>", line 969, in _find_and_load
  File "<frozen importlib._bootstrap>", line 958, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 664, in _load_unlocked
  File "<frozen importlib._bootstrap>", line 634, in _load_backward_compatible
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\setuptools-18.3.2-py3.5.egg\setuptools\__init__.py", line 12, in <module>
    from setuptools.extension import Extension
  File "<frozen importlib._bootstrap>", line 969, in _find_and_load
  File "<frozen importlib._bootstrap>", line 958, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 664, in _load_unlocked
  File "<frozen importlib._bootstrap>", line 634, in _load_backward_compatible
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\setuptools-18.3.2-py3.5.egg\setuptools\extension.py", line 9, in <module>
    from . import msvc9_support
  File "<frozen importlib._bootstrap>", line 969, in _find_and_load
  File "<frozen importlib._bootstrap>", line 958, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 664, in _load_unlocked
  File "<frozen importlib._bootstrap>", line 634, in _load_backward_compatible
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\site-packages\setuptools-18.3.2-py3.5.egg\setuptools\msvc9_support.py", line 2, in <module>
    import distutils.msvc9compiler
  File "C:\Users\lida\AppData\Local\Programs\Python\Python35-32\lib\distutils\msvc9compiler.py", line 235
    toolsdir = os.environ.get(toolskey, None)
                                            ^
IndentationError: unindent does not match any outer indentation level

依旧...... 我尝试过使用这个公式，但没有成功：

fist div : top:0
second div: top:100px
third div: top:200px

感谢。

Answer 1

是的，你可以这样做..

e.g。

<div id="wrapper">
     <div class="first-div">
     <div class="second-div"> 
</div>

<style type="text/css">

/* for first div */
#wrapper > div:nth-child(1) {
    top: 0px;
}


</style>

使用jQuery，您可以动态设置顶部。

e.g。

jQuery('#wrapper > div').each(function(index){
    jQuery(this).css('top', index * 100);
});

Answer 2

如果你想使用Alpesh Panchal方法并且仍然有可变高度div，你可以将总高度存储在一个变量中：

http://jsfiddle.net/4u9jLm95/2/

HTML：

<div id="wrapper">
  <div class="first"> </div>
  <div class="second"> </div> 
  <div class="third"> </div>
  <div class="fourth"> </div>
</div>

CSS：

#wrapper div {
  background-color: teal;
  width: 100px;
  position: absolute;
}

.first {
  height: 100px;
}
.second {
  height: 200px;
}
.third {
  height: 50px;
}
.fourth {
  height: 150px;
}

JS：

var total = 0;
$('#wrapper > div').each(function(index){
    $(this).css('top', total);
    total +=  $(this).height() + 100;
});

然而，正如其他人所说，使用position: absolute可能不是最佳选择。