Question

我有以下的HTML ..

＆＃13;

.wrapper {
  background:wheat;
}

.woocommerce-store-notice, p.demo_store {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    font-size: 1em;
    padding: 1em 0;
    text-align: center;
    background-color: #a46497;
    color: #fff;
    z-index: 99998;
    box-shadow: 0 1px 1em rgba(0,0,0,.2);
}

＆＃13;

<div class="wrapper">
This is my content
</div>
<p class="woocommerce-store-notice demo_store" style="display: block;">DEMO NOTICE CLICK HERE <a href="#" class="woocommerce-store-notice__dismiss-link">Dismiss</a></p>

＆＃13;

该通知正在掩盖我的内容，我知道我可以添加一些填充来修复此问题但是如何添加它以便填充仅适用于.woocommerce-store-notice可见？

Answer 1

您可以使用1行jQuery解决它。

在代码中，<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <div> Search 1: <select ng-model="optval1"> <option value="any">Any</option> <option value="name">Name</option> <option value="city">City</option> </select> <br> Selected Value={{optval1}}<br><br> Search 2: <select ng-model="optval2" > <option value="">Any</option> <option value="Name">Name</option> <option value="City">City</option> > </select> <br> Selected Value={{optval2}} </div> </div> </body> </html> <script> var myApp = angular.module("myApp",[]); myApp.controller('myCtrl', function($scope) { $scope.optval1 = "city"; }); </script>获取通知的高度，并将值应用于$(".woocommerce-store-notice").outerHeight()的{{1}}

＆＃13;

margin-top

＆＃13;

.wrapper

＆＃13;

$(".wrapper").css({"margin-top":$(".woocommerce-store-notice").outerHeight()})

＆＃13;

Answer 2

如果您无法更改html标记，则可以使用flex更改选择器的顺序，即.woocommerce-store-notice, p.demo_store将order: 0;和.wrapper order: 1;这样您就不必依赖绝对定位来确保通知显示在页面顶部。

试试下面的代码段。

＆＃13;

// dismiss the notice by clicking the "Dismiss" link"

document.querySelector('.woocommerce-store-notice__dismiss-link').addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelector('.woocommerce-store-notice').style.display = 'none';
});

＆＃13;

* {
  margin: 0;
}

.flex {
  display: flex;
  flex-direction: column;
}

.wrapper {
  background: wheat;
  order: 1;
}

.woocommerce-store-notice,
p.demo_store {
  order: 0;
  font-size: 1em;
  padding: 1em 0;
  text-align: center;
  background-color: #a46497;
  color: #fff;
  box-shadow: 0 1px 1em rgba(0, 0, 0, .2);
}

＆＃13;

<div class="flex">
  <div class="wrapper">
    This is my content
  </div>
  <p class="woocommerce-store-notice demo_store">DEMO NOTICE CLICK HERE <a href="#" class="woocommerce-store-notice__dismiss-link">Dismiss</a></p>
</div>

＆＃13;

CSS - 仅当另一个div可见时才添加填充

2 个答案: