Question

使用以下代码，切换时我希望<li>元素出现在按钮下方。我无法弄清楚为什么情况不是这样 - 有人可以对此有所了解吗？

＆＃13;

$('#switch').on('click', function(){
    $(this).parent().toggleClass('open');
})

＆＃13;

.container {
    display: block;
    height: 50px;
    width: 300px;
    z-index: 1;
}

#switch {
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
    z-index: 10;
}

ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-indent: 0;
    vertical-align: top;
    z-index: 1;
}

li {
    background: red;
    display: inline-block;
    height: 50px;
    margin: 0 0 0 10px;
    padding: 0;
    transform: translateX(-100%);
    width: 50px;
    z-index: 0;
}

.open li {
    transform: translateX(0);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container open">
    <button id="switch">Click</button>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

＆＃13;

Answer 1

z-index工作需要申报职位：

@Html.HiddenFor(model => model.UserName)

....

<script type="text/javascript">
$(function () {
    var userName = '@User.Identity.Name.Split('\\')[1]';
    $.ajax({
        url: '@Url.Action("GetUserName", "CourseComment")',
        data: { userName: userName },
        type: 'get'
    }).done(function (data) {
        $('#UserName').val(data);
    });
});

$('#switch').on('click', function() {
  $(this).parent().toggleClass('open');
})

.container {
  display: block;
  height: 50px;
  width: 300px;
  z-index: 1;
}
#switch {
  position: relative;
  display: inline-block;
  height: 50px;
  vertical-align: top;
  width: 50px;
  z-index: 10;
}
ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-indent: 0;
  vertical-align: top;
  z-index: 1;
}
li {
  position: relative;
  background: red;
  display: inline-block;
  height: 50px;
  margin: 0 0 0 10px;
  padding: 0;
  transform: translateX(-100%);
  width: 50px;
  z-index: 0;
}
.open li {
  transform: translateX(0);
}

Answer 2

将z-index与let picker: UIPickerView picker = UIPickerView(frame: CGRectMake(0, 200, view.frame.width, 300)) picker.backgroundColor = .whiteColor() picker.showsSelectionIndicator = true picker.delegate = self picker.dataSource = self let toolBar = UIToolbar() toolBar.barStyle = UIBarStyle.Default toolBar.translucent = true toolBar.tintColor = UIColor(red: 76/255, green: 217/255, blue: 100/255, alpha: 1) toolBar.sizeToFit() let doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Plain, target: self, action: "donePicker") let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil) let cancelButton = UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.Plain, target: self, action: "donePicker") toolBar.setItems([cancelButton, spaceButton, doneButton], animated: false) toolBar.userInteractionEnabled = true textField1.inputView = picker textField1.inputAccessoryView = toolBar，position: absolute;或position: relative;一起使用。

什么阻止z-index对这些元素产生影响？

2 个答案: