在中心容器内扩展div的左侧

Question

我想在一个居中的容器中扩展导航菜单的左侧。我试过position: absolute，但菜单重叠了徽标， 有另一种解决方案吗？如果没有，我如何停止与其他元素重叠的绝对元素？

这是我正在尝试做的事情的图像 extended div

Answer 1

如果要将菜单元素保留在容器中，可以使用绝对 <div ng-app="myApp" ng-controller="myCtrl"> <input type="text" ng-model="width" /><br /> <input type="text" ng-model="height" /><br /> <p>The result is: </p>{{width * height /2}}; </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.width = 44; $scope.height = 22; }); </script> 伪元素。

::before

section {
  max-width: 300px;
  margin: 0 auto;
  background-color: #eaeaea
}

header {
  display: flex;
  line-height: 30px;
}

nav {
  background-color: rgba(255,0,0,.2);
  position: relative;
}

nav::before{
  content:'';
  position: absolute;
  display: block;
  width: 100vw;
  height: 100%;
  right: 100%;
  background-color: rgba(255,0,0,.2);
}