在此模板中：http://livedemo00.template-help.com/wordpress_51000/
绿色社交网络按钮位于紫色条的顶部。
这是在::before元素中使用<header>伪元素生成的条形码。
整个内容是<header>的孩子并且在紫色栏后面（我通过将<div class="content">设置为黄色边框来测试它），但是这个社交网络div是ON TOP。
我正在努力实现同样的目标，而我却做不到。 div只是位于使用::before生成的栏后面。我看过CSS，没有任何东西可以做出这种行为，至少我找不到它。
我可以使用另一种方法而不是::before，但我认为现在是了解它的好时机。
http://jsfiddle.net/otbz03un/（在:: before元素中设置“position：absolute”以查看问题）
<link id="font-awesome-css" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css?ver=3.2.1" type="text/css" media="all">
<header class="header">
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<div class="span6 pull-right">
<div class="social-nets-wrapper">
<ul class="social">
<li>
<a href="#" title="facebook">
<img src="http://livedemo00.template-help.com/wordpress_51000/wp-content/themes/theme51000/images/social/facebook.png" alt="facebook">
</a>
</li>
<li>
<a href="#" title="twitter">
<img src="http://livedemo00.template-help.com/wordpress_51000/wp-content/themes/theme51000/images/social/twitter.png" alt="twitter">
</a>
</li>
<li>
<a href="#" title="pinterest">
<img src="http://livedemo00.template-help.com/wordpress_51000/wp-content/themes/theme51000/images/social/pinterest.png" alt="pinterest">
</a>
</li>
<li>
<a href="#" title="google">
<img src="http://livedemo00.template-help.com/wordpress_51000/wp-content/themes/theme51000/images/social/google.png" alt="google">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="span5">
<div class="logo pull-left">
<a href="http://livedemo00.template-help.com/wordpress_51000/" class="logo_h logo_h__img">
<img src="http://livedemo00.template-help.com/wordpress_51000/wp-content/themes/theme51000/images/logo.png" alt="Language School" title="YOUR KNOWLEDGE">
</a>
<p class="logo_tagline">YOUR KNOWLEDGE</p>
</div>
</div>
<div class="span7">
<nav class="nav nav__primary clearfix">
<ul id="topnav" class="sf-menu sf-js-enabled">
<li id="menu-item-1807" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-203 current_page_item">
<a href="http://livedemo00.template-help.com/wordpress_51000/">Home</a>
</li>
<li id="menu-item-1810" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href="http://livedemo00.template-help.com/wordpress_51000/our-school/">Our school</a>
<ul style="visibility: hidden;" class="sub-menu">
<li id="menu-item-1811" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="http://livedemo00.template-help.com/wordpress_51000/our-school/testi/">Testimonials</a>
</li>
<li id="menu-item-1812" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="http://livedemo00.template-help.com/wordpress_51000/our-school/archives/">Archives</a>
</li>
<li id="menu-item-1805" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="http://livedemo00.template-help.com/wordpress_51000/our-school/faqs/">FAQs</a>
</li>
</ul>
</li>
<li id="menu-item-1808" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href="http://livedemo00.template-help.com/wordpress_51000/portfolio/">Programs</a>
<ul style="visibility: hidden;" class="sub-menu">
<li id="menu-item-1815" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-2/">Programs 2</a>
</li>
<li id="menu-item-1814" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-3/">Programs 3</a>
<ul style="visibility: hidden;" class="sub-menu">
<li id="menu-item-1883" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-3/category-1/">Category 1</a>
</li>
<li id="menu-item-1882" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-3/category-2/">Category 2</a>
</li>
<li id="menu-item-1881" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-3/category-3/">Category 3</a>
</li>
</ul>
</li>
<li id="menu-item-1813" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-4/">Programs 4</a>
</li>
</ul>
</li>
<li id="menu-item-1806" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="http://livedemo00.template-help.com/wordpress_51000/blog/">Our blog</a>
</li>
<li id="menu-item-1804" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="http://livedemo00.template-help.com/wordpress_51000/contacts/">Contacts</a>
</li>
</ul>
<select class="select-menu">
<option value="#">Navigate to...</option>
<option selected="selected" value="http://livedemo00.template-help.com/wordpress_51000/">Home
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/our-school/">Our school
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/our-school/testi/">–Testimonials
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/our-school/archives/">–Archives
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/our-school/faqs/">–FAQs
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/portfolio/">Programs
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-2/">–Programs 2
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-3/">–Programs 3
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-3/category-1/">––Category 1
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-3/category-2/">––Category 2
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-3/category-3/">––Category 3
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/portfolio/programs-4/">–Programs 4
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/blog/">Our blog
</option>
<option value="http://livedemo00.template-help.com/wordpress_51000/contacts/">Contacts
</option>
</select>
</nav>
<div style="position: relative; display: block;" class="pseudoStickyBlock"></div>
</div>
</div>
</div>
</div>
</div>
</header>
CSS：
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(//fonts.googleapis.com/css?family=Ubuntu:400,700);
.header::before {
background: #403d5a none repeat scroll 0 0;
bottom: auto;
content: "";
display: block;
height: 36px;
left: 0;
position: relative;
right: 0;
top: 0;
}
.header {
background: #fff none repeat scroll 0 0;
border-bottom: 1px solid #e4e4e4;
margin: 0;
padding: 0 0 20px;
position: relative;
}
.header .social-nets-wrapper ul {
background:#a1cd51;
display:inline-block;
margin:0;
padding:0 10px;
vertical-align:top;
line-height:0;
font-size:0;
}
.header .social-nets-wrapper ul li {
display:inline-block;
margin:0;
padding:0;
vertical-align:top;
list-style:none;
}
.header .social-nets-wrapper ul li a { display:block; }
.header .social-nets-wrapper ul li a img { display:none; }
.header .social-nets-wrapper ul li a:before {
background:#a1cd51;
display:inline-block;
width:37px;
height:36px;
-webkit-transition:0.8s;
-moz-transition:0.8s;
-o-transition:0.8s;
transition:0.8s;
vertical-align:top;
line-height:36px;
font-family: FontAwesome;
font-size:17px;
text-align:center;
color:#fff;
}
.header .social-nets-wrapper ul li a[title="facebook"]:before { content:'\f09a'; }
.header .social-nets-wrapper ul li a[title="twitter"]:before { content:'\f099'; }
.header .social-nets-wrapper ul li a[title="pinterest"]:before { content:'\f0d2'; }
.header .social-nets-wrapper ul li a[title="google"]:before { content:'\f0d5'; }
.header .social-nets-wrapper ul li a:hover:before {
background:#6f6f6f;
-webkit-transition:0.4s;
-moz-transition:0.4s;
-o-transition:0.4s;
transition:0.4s;
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
}
@media (max-width: 767px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}